@olundot/ui 0.13.0 → 0.14.0

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @olundot/ui
 
+## 0.14.0
+
+### Minor Changes
+
+- DataTable: wrap the loading skeleton and empty state in `role="rowgroup"` / `role="row"` / `role="cell"` structure so `role="table"` only has permitted children — fixes the `aria-required-children` violation (WCAG 1.3.1, axe Critical). Same pattern the data rows already used; visuals and `data-slot` markers are unchanged. (#56, #57)
+- DetailLayout: wire tab triggers to their panels with a real `tab`/`tabpanel` contract — `aria-controls` targets, `role="tabpanel"` panels (including wrapped panel children), and stable panel ids. Public API is unchanged. (#59, #60)
+
+This is a compatibility-preserving accessibility stabilization release: no public API or visual contract changes from 0.13.0.
+
 ## 0.13.0
 
 ### Minor Changes

package/dist/index.d.ts

@@ -32,8 +32,8 @@ declare function useOlunTheme(): UseOlunThemeValue;
 type SurfaceLevel = "surface" | "canvas" | "raised";
 
 declare const buttonVariants: (props?: ({
-    variant?: "primary" | "secondary" | "destructive" | "default" | "outline" | "ghost" | "danger" | "emergency" | "subtle" | "link" | null | undefined;
-    size?: "xs" | "sm" | "md" | "lg" | "xl" | "default" | "icon" | "icon-xs" | null | undefined;
+    variant?: "default" | "primary" | "outline" | "ghost" | "danger" | "emergency" | "subtle" | "destructive" | "secondary" | "link" | null | undefined;
+    size?: "default" | "xs" | "sm" | "md" | "lg" | "xl" | "icon" | "icon-xs" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type ButtonVariant = NonNullable<VariantProps<typeof buttonVariants>['variant']>;
 type ButtonSize = NonNullable<VariantProps<typeof buttonVariants>['size']>;
@@ -54,7 +54,7 @@ type CopyButtonProps = Omit<ButtonProps, 'children' | 'leadingIcon' | 'loading'
     variant?: ButtonVariant;
     duration?: number;
 };
-declare const CopyButton: React.ForwardRefExoticComponent<Omit<ButtonProps, "variant" | "size" | "leadingIcon" | "trailingIcon" | "loading" | "children"> & {
+declare const CopyButton: React.ForwardRefExoticComponent<Omit<ButtonProps, "size" | "variant" | "leadingIcon" | "trailingIcon" | "loading" | "children"> & {
     value: string;
     label?: React.ReactNode;
     copiedLabel?: React.ReactNode;
@@ -70,7 +70,7 @@ declare const inputVariants: (props?: ({
     surface?: SurfaceLevel | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const inputMessageVariants: (props?: ({
-    state?: "error" | "success" | "default" | null | undefined;
+    state?: "default" | "error" | "success" | null | undefined;
     size?: "sm" | "md" | "lg" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type InputState = NonNullable<VariantProps<typeof inputMessageVariants>["state"]>;
@@ -119,11 +119,11 @@ interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "
 declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
 
 declare const fileUploadZoneVariants: (props?: ({
-    size?: "compact" | "default" | null | undefined;
+    size?: "default" | "compact" | null | undefined;
     surface?: SurfaceLevel | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const fileUploadIconVariants: (props?: ({
-    size?: "compact" | "default" | null | undefined;
+    size?: "default" | "compact" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface FileUploadZoneProps extends Omit<React.LabelHTMLAttributes<HTMLLabelElement>, "onChange">, VariantProps<typeof fileUploadZoneVariants> {
     accept?: string;
@@ -166,7 +166,7 @@ declare const textareaVariants: (props?: ({
     surface?: SurfaceLevel | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const textareaMessageVariants: (props?: ({
-    state?: "error" | "success" | "default" | null | undefined;
+    state?: "default" | "error" | "success" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type TextareaState = NonNullable<VariantProps<typeof textareaMessageVariants>["state"]>;
 /** Canonical size type (0.2.0+). Use `size` prop with these values. */
@@ -221,7 +221,7 @@ declare const selectVariants: (props?: ({
     surface?: SurfaceLevel | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const selectMessageVariants: (props?: ({
-    state?: "error" | "success" | "default" | null | undefined;
+    state?: "default" | "error" | "success" | null | undefined;
     size?: "sm" | "md" | "lg" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type SelectState = NonNullable<VariantProps<typeof selectMessageVariants>["state"]>;
@@ -1020,12 +1020,12 @@ declare const NotificationBadge: React.ForwardRefExoticComponent<NotificationBad
 
 declare const chipVariants: (props?: ({
     variant?: "filter" | "choice" | "removable" | "status-filter" | null | undefined;
-    tone?: "muted" | "accent" | "warning" | "success" | "neutral" | "danger" | null | undefined;
+    tone?: "accent" | "danger" | "success" | "warning" | "neutral" | "muted" | null | undefined;
     size?: "sm" | "md" | "lg" | null | undefined;
     pressed?: boolean | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const chipCountVariants: (props?: ({
-    tone?: "muted" | "accent" | "warning" | "success" | "neutral" | "danger" | null | undefined;
+    tone?: "accent" | "danger" | "success" | "warning" | "neutral" | "muted" | null | undefined;
     size?: "sm" | "md" | "lg" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type ChipVariant = NonNullable<VariantProps<typeof chipVariants>["variant"]>;
@@ -1264,7 +1264,7 @@ interface ActionFooterProps extends Omit<React.HTMLAttributes<HTMLDivElement>, '
 declare const ActionFooter: React.ForwardRefExoticComponent<ActionFooterProps & React.RefAttributes<HTMLDivElement>>;
 
 declare const toastVariants: (props?: ({
-    variant?: "error" | "warning" | "info" | "success" | "default" | null | undefined;
+    variant?: "default" | "error" | "success" | "info" | "warning" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const toastViewportVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
 type ToastVariant = NonNullable<VariantProps<typeof toastVariants>['variant']>;
@@ -1318,19 +1318,19 @@ interface ToastProviderProps extends React.HTMLAttributes<HTMLDivElement> {
 declare function ToastProvider({ children, maxToasts, className, ...props }: ToastProviderProps): react_jsx_runtime.JSX.Element;
 
 declare const otpFieldVariants: (props?: ({
-    size?: "compact" | "default" | null | undefined;
+    size?: "default" | "compact" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const otpFieldGroupVariants: (props?: ({
-    size?: "compact" | "default" | null | undefined;
+    size?: "default" | "compact" | null | undefined;
     fluid?: boolean | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const otpCellVariants: (props?: ({
-    size?: "compact" | "default" | null | undefined;
+    size?: "default" | "compact" | null | undefined;
     fluid?: boolean | null | undefined;
     surface?: SurfaceLevel | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const otpFieldMessageVariants: (props?: ({
-    state?: "error" | "default" | null | undefined;
+    state?: "default" | "error" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type OTPFieldSize = NonNullable<VariantProps<typeof otpCellVariants>["size"]>;
 interface OTPFieldProps extends Omit<React.FieldsetHTMLAttributes<HTMLFieldSetElement>, "onChange" | "children" | "defaultValue" | "value">, VariantProps<typeof otpFieldVariants> {
@@ -1387,11 +1387,11 @@ declare const checkboxBoxVariants: (props?: ({
     size?: "sm" | "md" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const checkboxGroupItemVariants: (props?: ({
-    appearance?: "card" | "plain" | null | undefined;
+    appearance?: "plain" | "card" | null | undefined;
     density?: "compact" | "comfortable" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const checkboxGroupBoxVariants: (props?: ({
-    appearance?: "card" | "plain" | null | undefined;
+    appearance?: "plain" | "card" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type CheckboxSize = NonNullable<VariantProps<typeof checkboxBoxVariants>["size"]>;
 type CheckboxCheckedState = React.ComponentProps<typeof Checkbox$1.Root>["checked"];
@@ -1416,7 +1416,7 @@ interface CheckboxProps extends Omit<React.ComponentPropsWithoutRef<typeof Check
 declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLButtonElement>>;
 
 declare const checkboxGroupVariants: (props?: ({
-    appearance?: "card" | "plain" | null | undefined;
+    appearance?: "plain" | "card" | null | undefined;
     orientation?: "horizontal" | "vertical" | null | undefined;
     columns?: "one" | "two" | "three" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
@@ -1437,16 +1437,16 @@ interface CheckboxGroupProps extends Omit<React.HTMLAttributes<HTMLDivElement>,
 declare const CheckboxGroup: React.ForwardRefExoticComponent<CheckboxGroupProps & React.RefAttributes<HTMLDivElement>>;
 
 declare const radioGroupVariants: (props?: ({
-    appearance?: "card" | "plain" | null | undefined;
+    appearance?: "plain" | "card" | null | undefined;
     orientation?: "horizontal" | "vertical" | null | undefined;
     columns?: "one" | "two" | "three" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const radioVariants: (props?: ({
-    appearance?: "card" | "plain" | null | undefined;
+    appearance?: "plain" | "card" | null | undefined;
     density?: "compact" | "comfortable" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const radioControlVariants: (props?: ({
-    appearance?: "card" | "plain" | null | undefined;
+    appearance?: "plain" | "card" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type RadioGroupAppearance = NonNullable<VariantProps<typeof radioGroupVariants>["appearance"]>;
 type RadioGroupColumns = NonNullable<VariantProps<typeof radioGroupVariants>["columns"]>;

package/dist/index.js

@@ -3149,6 +3149,38 @@ function DetailLayoutBody({
     }
   );
 }
+function isTabsContentChild(child) {
+  return React18.isValidElement(child) && child.type === TabsContent;
+}
+function containsTabsContent(children) {
+  return React18.Children.toArray(children).some((child) => {
+    if (isTabsContentChild(child)) return true;
+    return React18.isValidElement(child) && containsTabsContent(child.props.children);
+  });
+}
+function appendFooterToActiveTabsContent(children, activeTab, footer) {
+  return React18.Children.map(children, (child) => {
+    if (isTabsContentChild(child)) {
+      if (child.props.tabKey !== activeTab || !footer) return child;
+      return React18.cloneElement(
+        child,
+        void 0,
+        /* @__PURE__ */ jsxs18(Fragment6, { children: [
+          child.props.children,
+          /* @__PURE__ */ jsx19("div", { "data-slot": "detail-layout-footer", className: "min-w-0", children: footer })
+        ] })
+      );
+    }
+    if (React18.isValidElement(child)) {
+      return React18.cloneElement(
+        child,
+        void 0,
+        appendFooterToActiveTabsContent(child.props.children, activeTab, footer)
+      );
+    }
+    return child;
+  });
+}
 var DetailLayout = React18.forwardRef(
   ({
     className,
@@ -3179,6 +3211,7 @@ var DetailLayout = React18.forwardRef(
         children
       }
     );
+    const hasExplicitTabsContent = containsTabsContent(children);
     return /* @__PURE__ */ jsxs18(
       "section",
       {
@@ -3188,10 +3221,31 @@ var DetailLayout = React18.forwardRef(
         ...props,
         children: [
           /* @__PURE__ */ jsx19("div", { "data-slot": "detail-layout-header", className: "min-w-0", children: header }),
-          tabs ? /* @__PURE__ */ jsxs18(Tabs, { tabs, activeKey: activeTab, onChange: onTabChange, baseId, children: [
-            body,
-            footer ? /* @__PURE__ */ jsx19("div", { "data-slot": "detail-layout-footer", className: "min-w-0", children: footer }) : null
-          ] }) : /* @__PURE__ */ jsxs18(Fragment6, { children: [
+          tabs ? /* @__PURE__ */ jsx19(Tabs, { tabs, activeKey: activeTab, onChange: onTabChange, baseId, children: hasExplicitTabsContent ? /* @__PURE__ */ jsx19(
+            DetailLayoutBody,
+            {
+              aside,
+              bodyClassName,
+              contentClassName,
+              asideClassName,
+              stickyAside,
+              stickyAsideTopClassName,
+              children: appendFooterToActiveTabsContent(children, activeTab, footer)
+            }
+          ) : tabs.map((tab) => /* @__PURE__ */ jsx19(
+            TabsContent,
+            {
+              tabKey: tab.key,
+              baseId,
+              forceMount: true,
+              hidden: tab.key !== activeTab,
+              children: tab.key === activeTab ? /* @__PURE__ */ jsxs18(Fragment6, { children: [
+                body,
+                footer ? /* @__PURE__ */ jsx19("div", { "data-slot": "detail-layout-footer", className: "min-w-0", children: footer }) : null
+              ] }) : null
+            },
+            tab.key
+          )) }) : /* @__PURE__ */ jsxs18(Fragment6, { children: [
             body,
             footer ? /* @__PURE__ */ jsx19("div", { "data-slot": "detail-layout-footer", className: "min-w-0", children: footer }) : null
           ] })
@@ -4309,27 +4363,35 @@ function SkeletonRows({
   gridTemplateColumns,
   count
 }) {
-  return /* @__PURE__ */ jsx26("div", { "aria-label": "\uB370\uC774\uD130 \uB85C\uB4DC \uC911", role: "status", children: Array.from({ length: count }, (_, rowIndex) => /* @__PURE__ */ jsxs25(
-    "div",
-    {
-      "data-slot": "data-table-skeleton-row",
-      className: "grid min-h-[48px] items-center border-t border-[var(--border-subtle)]",
-      style: { gridTemplateColumns },
-      children: [
-        selectable ? /* @__PURE__ */ jsx26("div", { "aria-hidden": "true", className: "px-[var(--space-4)]" }) : null,
-        columns.map((column, columnIndex) => /* @__PURE__ */ jsx26("div", { className: "px-[var(--space-4)] py-[var(--space-2)]", children: /* @__PURE__ */ jsx26(
-          "div",
-          {
-            className: cn(
-              "h-[14px] animate-pulse rounded-[var(--radius-sm)] bg-[var(--bg-raised)]",
-              columnIndex === 0 ? "w-[72%]" : column.align === "right" ? "ml-auto w-[54%]" : "w-[62%]"
-            )
-          }
-        ) }, column.key))
-      ]
-    },
-    rowIndex
-  )) });
+  return (
+    // role="table"의 허용 자식은 row/rowgroup뿐이라 컨테이너는 rowgroup이어야 한다.
+    // 로딩 알림은 그 안의 row/cell 안에 둔다 — 종전에는 컨테이너가 role="status"라
+    // aria-required-children(Critical)이 났다.
+    /* @__PURE__ */ jsxs25("div", { role: "rowgroup", children: [
+      /* @__PURE__ */ jsx26("div", { role: "row", children: /* @__PURE__ */ jsx26("div", { role: "cell", "aria-colindex": 1, "aria-label": "\uB370\uC774\uD130 \uB85C\uB4DC \uC911", children: /* @__PURE__ */ jsx26("span", { role: "status", className: "sr-only", children: "\uB370\uC774\uD130 \uB85C\uB4DC \uC911" }) }) }),
+      Array.from({ length: count }, (_, rowIndex) => /* @__PURE__ */ jsxs25(
+        "div",
+        {
+          "data-slot": "data-table-skeleton-row",
+          className: "grid min-h-[48px] items-center border-t border-[var(--border-subtle)]",
+          style: { gridTemplateColumns },
+          children: [
+            selectable ? /* @__PURE__ */ jsx26("div", { "aria-hidden": "true", className: "px-[var(--space-4)]" }) : null,
+            columns.map((column, columnIndex) => /* @__PURE__ */ jsx26("div", { className: "px-[var(--space-4)] py-[var(--space-2)]", children: /* @__PURE__ */ jsx26(
+              "div",
+              {
+                className: cn(
+                  "h-[14px] animate-pulse rounded-[var(--radius-sm)] bg-[var(--bg-raised)]",
+                  columnIndex === 0 ? "w-[72%]" : column.align === "right" ? "ml-auto w-[54%]" : "w-[62%]"
+                )
+              }
+            ) }, column.key))
+          ]
+        },
+        rowIndex
+      ))
+    ] })
+  );
 }
 function MobileSkeletonCards({ count }) {
   return /* @__PURE__ */ jsx26(
@@ -4493,7 +4555,20 @@ function DataTableInner({
               gridTemplateColumns,
               count: skeletonRowCount
             }
-          ) : data.length === 0 ? /* @__PURE__ */ jsx26("div", { "data-slot": "data-table-empty", className: "border-t border-[var(--border-subtle)] p-[var(--space-4)]", children: emptyState }) : /* @__PURE__ */ jsx26("div", { role: "rowgroup", children: data.map((row) => {
+          ) : data.length === 0 ? (
+            /* role="table" 직계 자식은 row/rowgroup이어야 한다. data-slot과 테두리는
+               그대로 유지해 시각 계약을 깨지 않는다(빈 상태에서도 표가 테두리를 그린다). */
+            /* @__PURE__ */ jsx26("div", { role: "rowgroup", children: /* @__PURE__ */ jsx26("div", { role: "row", children: /* @__PURE__ */ jsx26(
+              "div",
+              {
+                role: "cell",
+                "aria-colindex": 1,
+                "data-slot": "data-table-empty",
+                className: "border-t border-[var(--border-subtle)] p-[var(--space-4)]",
+                children: emptyState
+              }
+            ) }) })
+          ) : /* @__PURE__ */ jsx26("div", { role: "rowgroup", children: data.map((row) => {
             const rowId = getRowId(row, keyField);
             const selected = resolvedSelectedIds.has(rowId);
             const visuallySelected = selected || rowId === activeRowId;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@olundot/ui",
-  "version": "0.13.0",
+  "version": "0.14.0",
   "description": "OLUN. shared React UI components built on OLUN design tokens",
   "license": "MIT",
   "keywords": [
@@ -38,13 +38,21 @@
       "import": "./dist/tailwind.preset.js"
     }
   },
+  "scripts": {
+    "build": "tsup",
+    "lint": "node scripts/verify-source-imports.mjs",
+    "test": "sh -c 'set -e; if [ \"$#\" -gt 0 ]; then for test_file in \"$@\"; do node --import tsx \"$test_file\"; done; else for test_file in src/components/ui/*.test.tsx; do node --import tsx \"$test_file\"; done; fi' --",
+    "test:accent-contracts": "node scripts/verify-accent-contracts.mjs",
+    "type-check": "tsc --noEmit",
+    "prepublishOnly": "pnpm build && pnpm test && pnpm test:accent-contracts && pnpm type-check && pnpm lint"
+  },
   "dependencies": {
+    "@olundot/tokens": "workspace:^",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "lucide-react": "^1.8.0",
     "radix-ui": "^1.4.3",
-    "tailwind-merge": "^3.5.0",
-    "@olundot/tokens": "^0.14.0"
+    "tailwind-merge": "^3.5.0"
   },
   "peerDependencies": {
     "react": ">=18",
@@ -69,12 +77,5 @@
   },
   "publishConfig": {
     "access": "public"
-  },
-  "scripts": {
-    "build": "tsup",
-    "lint": "node scripts/verify-source-imports.mjs",
-    "test": "sh -c 'set -e; if [ \"$#\" -gt 0 ]; then for test_file in \"$@\"; do node --import tsx \"$test_file\"; done; else for test_file in src/components/ui/*.test.tsx; do node --import tsx \"$test_file\"; done; fi' --",
-    "test:accent-contracts": "node scripts/verify-accent-contracts.mjs",
-    "type-check": "tsc --noEmit"
   }
-}
+}