@rockshin/tao-ui 0.0.9 → 0.0.11

package/dist/components/date-picker/range-picker.js

@@ -237,9 +237,20 @@ function RangePicker({ value, onChange, picker = 'date', showTime, format: forma
                 "data-tao-picker-icons": "",
                 children: showClearBtn && hovering ? /*#__PURE__*/ jsx("span", {
                     "data-tao-picker-clear": "",
-                    onClick: handleClear,
-                    role: "button",
+                    onClick: (event)=>{
+                        event.stopPropagation();
+                        handleClear(event);
+                    },
                     "aria-label": "Clear",
+                    role: "button",
+                    tabIndex: 0,
+                    onKeyDown: (event_0)=>{
+                        if ('Enter' === event_0.key || ' ' === event_0.key) {
+                            event_0.preventDefault();
+                            event_0.stopPropagation();
+                            handleClear(event_0);
+                        }
+                    },
                     children: /*#__PURE__*/ jsx(CloseIcon, {})
                 }) : /*#__PURE__*/ jsx("span", {
                     "data-tao-picker-suffix": "",
@@ -288,6 +299,8 @@ function CalendarIcon() {
     let t0;
     if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
         t0 = /*#__PURE__*/ jsxs("svg", {
+            "aria-hidden": "true",
+            focusable: "false",
             width: "16",
             height: "16",
             viewBox: "0 0 24 24",
@@ -321,6 +334,8 @@ function CloseIcon() {
     let t0;
     if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
         t0 = /*#__PURE__*/ jsx("svg", {
+            "aria-hidden": "true",
+            focusable: "false",
             width: "14",
             height: "14",
             viewBox: "0 0 24 24",
@@ -342,6 +357,8 @@ function LeftIcon() {
     let t0;
     if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
         t0 = /*#__PURE__*/ jsx("svg", {
+            "aria-hidden": "true",
+            focusable: "false",
             width: "14",
             height: "14",
             viewBox: "0 0 24 24",
@@ -363,6 +380,8 @@ function RightIcon() {
     let t0;
     if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
         t0 = /*#__PURE__*/ jsx("svg", {
+            "aria-hidden": "true",
+            focusable: "false",
             width: "14",
             height: "14",
             viewBox: "0 0 24 24",
@@ -384,6 +403,8 @@ function DoubleLeftIcon() {
     let t0;
     if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
         t0 = /*#__PURE__*/ jsxs("svg", {
+            "aria-hidden": "true",
+            focusable: "false",
             width: "14",
             height: "14",
             viewBox: "0 0 24 24",
@@ -410,6 +431,8 @@ function DoubleRightIcon() {
     let t0;
     if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
         t0 = /*#__PURE__*/ jsxs("svg", {
+            "aria-hidden": "true",
+            focusable: "false",
             width: "14",
             height: "14",
             viewBox: "0 0 24 24",

package/dist/components/drawer/drawer.js

@@ -367,6 +367,8 @@ function CloseIcon() {
     let t0;
     if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
         t0 = /*#__PURE__*/ jsx("svg", {
+            "aria-hidden": "true",
+            focusable: "false",
             width: "16",
             height: "16",
             viewBox: "0 0 24 24",

package/dist/components/dropdown/dropdown.js

@@ -39,7 +39,8 @@ function EllipsisIcon() {
             height: "16",
             viewBox: "0 0 24 24",
             fill: "currentColor",
-            "aria-hidden": true,
+            "aria-hidden": "true",
+            focusable: "false",
             children: [
                 /*#__PURE__*/ jsx("circle", {
                     cx: "5",

package/dist/components/form-field/form.css

@@ -31,10 +31,7 @@
 }
 
 [data-tao-form-section] {
-  border: none;
   flex-direction: column;
-  margin: 0;
-  padding: 0;
   display: flex;
 }
 
@@ -53,7 +50,6 @@
   font-size: var(--tao-font-size-lg);
   font-weight: var(--tao-font-weight-strong);
   color: var(--tao-color-text);
-  padding: 0;
   line-height: 1.25;
 }
 

package/dist/components/form-section/form-section.js

@@ -31,7 +31,7 @@ function FormSection(t0) {
             style: styles?.header,
             "data-tao-form-section-header": "",
             children: [
-                title && /*#__PURE__*/ jsx("legend", {
+                title && /*#__PURE__*/ jsx("div", {
                     className: classNames?.title,
                     style: styles?.title,
                     "data-tao-form-section-title": "",
@@ -72,7 +72,7 @@ function FormSection(t0) {
     } else t8 = $[18];
     let t9;
     if ($[19] !== t2 || $[20] !== t4 || $[21] !== t5 || $[22] !== t8) {
-        t9 = /*#__PURE__*/ jsxs("fieldset", {
+        t9 = /*#__PURE__*/ jsxs("section", {
             className: t2,
             style: t4,
             "data-tao-form-section": "",

package/dist/components/menu/menu-render.js

@@ -18,7 +18,8 @@ function ChevronRightIcon() {
             strokeWidth: "2",
             strokeLinecap: "round",
             strokeLinejoin: "round",
-            "aria-hidden": true,
+            "aria-hidden": "true",
+            focusable: "false",
             children: /*#__PURE__*/ jsx("path", {
                 d: "m9 18 6-6-6-6"
             })
@@ -40,7 +41,8 @@ function CheckIcon() {
             strokeWidth: "2.5",
             strokeLinecap: "round",
             strokeLinejoin: "round",
-            "aria-hidden": true,
+            "aria-hidden": "true",
+            focusable: "false",
             children: /*#__PURE__*/ jsx("polyline", {
                 points: "20 6 9 17 4 12"
             })
@@ -58,7 +60,8 @@ function DotIcon() {
             height: "16",
             viewBox: "0 0 24 24",
             fill: "currentColor",
-            "aria-hidden": true,
+            "aria-hidden": "true",
+            focusable: "false",
             children: /*#__PURE__*/ jsx("circle", {
                 cx: "12",
                 cy: "12",

package/dist/components/modal/confirm-dialog.js

@@ -99,7 +99,7 @@ function StatusIcon(t0) {
             strokeWidth: 2,
             strokeLinecap: "round",
             strokeLinejoin: "round",
-            "aria-hidden": true
+            "aria-hidden=\"true\"": true
         };
         $[0] = t1;
     } else t1 = $[0];
@@ -110,6 +110,8 @@ function StatusIcon(t0) {
                 let t2;
                 if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
                     t2 = /*#__PURE__*/ jsxs("svg", {
+                        "aria-hidden": "true",
+                        focusable: "false",
                         ...common,
                         children: [
                             /*#__PURE__*/ jsx("circle", {
@@ -131,6 +133,8 @@ function StatusIcon(t0) {
                 let t2;
                 if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
                     t2 = /*#__PURE__*/ jsxs("svg", {
+                        "aria-hidden": "true",
+                        focusable: "false",
                         ...common,
                         children: [
                             /*#__PURE__*/ jsx("circle", {
@@ -153,6 +157,8 @@ function StatusIcon(t0) {
                 let t2;
                 if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
                     t2 = /*#__PURE__*/ jsxs("svg", {
+                        "aria-hidden": "true",
+                        focusable: "false",
                         ...common,
                         children: [
                             /*#__PURE__*/ jsx("path", {
@@ -172,6 +178,8 @@ function StatusIcon(t0) {
                 let t2;
                 if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
                     t2 = /*#__PURE__*/ jsxs("svg", {
+                        "aria-hidden": "true",
+                        focusable: "false",
                         ...common,
                         children: [
                             /*#__PURE__*/ jsx("circle", {

package/dist/components/modal/modal.js

@@ -343,6 +343,8 @@ function CloseIcon() {
     let t0;
     if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
         t0 = /*#__PURE__*/ jsx("svg", {
+            "aria-hidden": "true",
+            focusable: "false",
             width: "16",
             height: "16",
             viewBox: "0 0 24 24",

package/dist/components/pagination/pagination.js

@@ -29,7 +29,8 @@ function ChevronLeft() {
             height: "16",
             viewBox: "0 0 16 16",
             fill: "none",
-            "aria-hidden": true,
+            "aria-hidden": "true",
+            focusable: "false",
             children: /*#__PURE__*/ jsx("path", {
                 d: "M10 12L6 8l4-4",
                 stroke: "currentColor",
@@ -51,7 +52,8 @@ function ChevronRight() {
             height: "16",
             viewBox: "0 0 16 16",
             fill: "none",
-            "aria-hidden": true,
+            "aria-hidden": "true",
+            focusable: "false",
             children: /*#__PURE__*/ jsx("path", {
                 d: "M6 4l4 4-4 4",
                 stroke: "currentColor",
@@ -65,7 +67,7 @@ function ChevronRight() {
     return t0;
 }
 function Pagination(t0) {
-    const $ = c(69);
+    const $ = c(63);
     const { current: currentProp, defaultCurrent: t1, pageSize: pageSizeProp, defaultPageSize: t2, total, onChange, showSizeChanger: t3, pageSizeOptions: t4, showTotal, size, disabled, className, classNames, styles } = t0;
     const defaultCurrent = void 0 === t1 ? 1 : t1;
     const defaultPageSize = void 0 === t2 ? 10 : t2;
@@ -184,31 +186,21 @@ function Pagination(t0) {
     } else t18 = $[29];
     let t19;
     if ($[30] !== classNames?.item || $[31] !== current || $[32] !== goTo || $[33] !== pages || $[34] !== resolvedDisabled || $[35] !== styles?.item) {
-        let t20;
-        if ($[37] !== classNames?.item || $[38] !== current || $[39] !== goTo || $[40] !== resolvedDisabled || $[41] !== styles?.item) {
-            t20 = (item, i)=>"ellipsis" === item ? /*#__PURE__*/ jsx("span", {
-                    "data-tao-pagination-ellipsis": "",
-                    children: "\xb7\xb7\xb7"
-                }, `e${i}`) : /*#__PURE__*/ jsx("button", {
-                    type: "button",
-                    "data-tao-pagination-btn": "",
-                    "data-tao-active": item === current || void 0,
-                    disabled: resolvedDisabled,
-                    "aria-label": `Page ${item}`,
-                    "aria-current": item === current ? "page" : void 0,
-                    onClick: ()=>goTo(item),
-                    className: classNames?.item,
-                    style: styles?.item,
-                    children: item
-                }, item);
-            $[37] = classNames?.item;
-            $[38] = current;
-            $[39] = goTo;
-            $[40] = resolvedDisabled;
-            $[41] = styles?.item;
-            $[42] = t20;
-        } else t20 = $[42];
-        t19 = pages.map(t20);
+        t19 = pages.map((item, i)=>"ellipsis" === item ? /*#__PURE__*/ jsx("span", {
+                "data-tao-pagination-ellipsis": "",
+                children: "\xb7\xb7\xb7"
+            }, `ellipsis-${pages[i - 1]}-${pages[i + 1]}`) : /*#__PURE__*/ jsx("button", {
+                type: "button",
+                "data-tao-pagination-btn": "",
+                "data-tao-active": item === current || void 0,
+                disabled: resolvedDisabled,
+                "aria-label": `Page ${item}`,
+                "aria-current": item === current ? "page" : void 0,
+                onClick: ()=>goTo(item),
+                className: classNames?.item,
+                style: styles?.item,
+                children: item
+            }, item));
         $[30] = classNames?.item;
         $[31] = current;
         $[32] = goTo;
@@ -219,21 +211,21 @@ function Pagination(t0) {
     } else t19 = $[36];
     const t20 = resolvedDisabled || current >= totalPages;
     let t21;
-    if ($[43] !== current || $[44] !== goTo) {
+    if ($[37] !== current || $[38] !== goTo) {
         t21 = ()=>goTo(current + 1);
-        $[43] = current;
-        $[44] = goTo;
-        $[45] = t21;
-    } else t21 = $[45];
+        $[37] = current;
+        $[38] = goTo;
+        $[39] = t21;
+    } else t21 = $[39];
     const t22 = classNames?.item;
     const t23 = styles?.item;
     let t24;
-    if ($[46] === Symbol.for("react.memo_cache_sentinel")) {
+    if ($[40] === Symbol.for("react.memo_cache_sentinel")) {
         t24 = /*#__PURE__*/ jsx(ChevronRight, {});
-        $[46] = t24;
-    } else t24 = $[46];
+        $[40] = t24;
+    } else t24 = $[40];
     let t25;
-    if ($[47] !== t20 || $[48] !== t21 || $[49] !== t22 || $[50] !== t23) {
+    if ($[41] !== t20 || $[42] !== t21 || $[43] !== t22 || $[44] !== t23) {
         t25 = /*#__PURE__*/ jsx("button", {
             type: "button",
             "data-tao-pagination-btn": "",
@@ -244,14 +236,14 @@ function Pagination(t0) {
             style: t23,
             children: t24
         });
-        $[47] = t20;
-        $[48] = t21;
-        $[49] = t22;
-        $[50] = t23;
-        $[51] = t25;
-    } else t25 = $[51];
+        $[41] = t20;
+        $[42] = t21;
+        $[43] = t22;
+        $[44] = t23;
+        $[45] = t25;
+    } else t25 = $[45];
     let t26;
-    if ($[52] !== goTo || $[53] !== pageSize || $[54] !== pageSizeOptions || $[55] !== resolvedDisabled || $[56] !== resolvedSize || $[57] !== showSizeChanger) {
+    if ($[46] !== goTo || $[47] !== pageSize || $[48] !== pageSizeOptions || $[49] !== resolvedDisabled || $[50] !== resolvedSize || $[51] !== showSizeChanger) {
         t26 = showSizeChanger && /*#__PURE__*/ jsx(Select, {
             style: {
                 width: "auto"
@@ -265,16 +257,16 @@ function Pagination(t0) {
             disabled: resolvedDisabled,
             size: "large" === resolvedSize ? "medium" : resolvedSize
         });
-        $[52] = goTo;
-        $[53] = pageSize;
-        $[54] = pageSizeOptions;
-        $[55] = resolvedDisabled;
-        $[56] = resolvedSize;
-        $[57] = showSizeChanger;
-        $[58] = t26;
-    } else t26 = $[58];
+        $[46] = goTo;
+        $[47] = pageSize;
+        $[48] = pageSizeOptions;
+        $[49] = resolvedDisabled;
+        $[50] = resolvedSize;
+        $[51] = showSizeChanger;
+        $[52] = t26;
+    } else t26 = $[52];
     let t27;
-    if ($[59] !== resolvedSize || $[60] !== t10 || $[61] !== t11 || $[62] !== t12 || $[63] !== t18 || $[64] !== t19 || $[65] !== t25 || $[66] !== t26 || $[67] !== t8) {
+    if ($[53] !== resolvedSize || $[54] !== t10 || $[55] !== t11 || $[56] !== t12 || $[57] !== t18 || $[58] !== t19 || $[59] !== t25 || $[60] !== t26 || $[61] !== t8) {
         t27 = /*#__PURE__*/ jsxs("nav", {
             "data-tao-pagination": "",
             "data-tao-size": resolvedSize,
@@ -290,17 +282,17 @@ function Pagination(t0) {
                 t26
             ]
         });
-        $[59] = resolvedSize;
-        $[60] = t10;
-        $[61] = t11;
-        $[62] = t12;
-        $[63] = t18;
-        $[64] = t19;
-        $[65] = t25;
-        $[66] = t26;
-        $[67] = t8;
-        $[68] = t27;
-    } else t27 = $[68];
+        $[53] = resolvedSize;
+        $[54] = t10;
+        $[55] = t11;
+        $[56] = t12;
+        $[57] = t18;
+        $[58] = t19;
+        $[59] = t25;
+        $[60] = t26;
+        $[61] = t8;
+        $[62] = t27;
+    } else t27 = $[62];
     return t27;
 }
 function _temp(opt) {

package/dist/components/scroll-area/scroll-area.css

@@ -21,6 +21,9 @@
   touch-action: none;
   transition: opacity var(--tao-motion-duration-mid) var(--tao-motion-ease-out);
   z-index: 2;
+  background: none;
+  border: 0;
+  padding: 0;
   position: absolute;
 }
 

package/dist/components/scroll-area/scroll-area.js

@@ -283,9 +283,11 @@ function ScrollArea(t0) {
     } else t34 = $[44];
     let t35;
     if ($[45] !== classNames?.scrollbar || $[46] !== classNames?.thumb || $[47] !== scrollState.hasVertical || $[48] !== scrollState.thumbYOffset || $[49] !== scrollState.thumbYRatio || $[50] !== showVertical || $[51] !== styles?.scrollbar || $[52] !== styles?.thumb) {
-        t35 = showVertical && scrollState.hasVertical && /*#__PURE__*/ jsx("div", {
+        t35 = showVertical && scrollState.hasVertical && /*#__PURE__*/ jsx("button", {
+            type: "button",
             "data-tao-scrollbar": "",
             "data-tao-orientation": "vertical",
+            "aria-label": "Scroll vertically",
             className: cx(classNames?.scrollbar),
             style: styles?.scrollbar,
             onClick: (e_2)=>handleTrackClick("y", e_2),
@@ -313,9 +315,11 @@ function ScrollArea(t0) {
     } else t35 = $[53];
     let t36;
     if ($[54] !== classNames?.scrollbar || $[55] !== classNames?.thumb || $[56] !== scrollState.hasHorizontal || $[57] !== scrollState.thumbXOffset || $[58] !== scrollState.thumbXRatio || $[59] !== showHorizontal || $[60] !== styles?.scrollbar || $[61] !== styles?.thumb) {
-        t36 = showHorizontal && scrollState.hasHorizontal && /*#__PURE__*/ jsx("div", {
+        t36 = showHorizontal && scrollState.hasHorizontal && /*#__PURE__*/ jsx("button", {
+            type: "button",
             "data-tao-scrollbar": "",
             "data-tao-orientation": "horizontal",
+            "aria-label": "Scroll horizontally",
             className: cx(classNames?.scrollbar),
             style: styles?.scrollbar,
             onClick: (e_4)=>handleTrackClick("x", e_4),

package/dist/components/select/mobile-select.css

@@ -47,13 +47,17 @@
 }
 
 [data-tao-sheet-item] {
+  width: 100%;
   min-height: 48px;
   padding-inline: var(--tao-padding);
   font-family: var(--tao-font-family);
   font-size: var(--tao-font-size-base);
+  text-align: start;
   color: var(--tao-color-text);
   cursor: pointer;
   -webkit-tap-highlight-color: transparent;
+  background: none;
+  border: 0;
   align-items: center;
   display: flex;
 }

package/dist/components/select/mobile-select.js

@@ -44,12 +44,14 @@ function MobileSelectContent({ options, value, onChange, showSearch, filterOptio
     const renderItem = (opt)=>{
         const index = optIndex++;
         const isSelected = opt.value === value;
-        return /*#__PURE__*/ jsxs("div", {
+        return /*#__PURE__*/ jsxs("button", {
+            type: "button",
             "data-tao-sheet-item": "",
             "data-tao-selected": isSelected || void 0,
             "data-tao-disabled": opt.disabled || void 0,
+            disabled: opt.disabled,
             onClick: ()=>{
-                if (!opt.disabled) handleSelect(opt.value);
+                handleSelect(opt.value);
             },
             "data-tao-has-desc": null != opt.description || void 0,
             children: [
@@ -103,8 +105,7 @@ function MobileSelectContent({ options, value, onChange, showSearch, filterOptio
                         "data-tao-sheet-search-input": "",
                         value: search,
                         onChange: (e)=>setSearch(e.target.value),
-                        placeholder: "Search...",
-                        autoFocus: true
+                        placeholder: "Search..."
                     })
                 ]
             }),
@@ -173,6 +174,8 @@ function SearchIcon() {
     let t0;
     if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
         t0 = /*#__PURE__*/ jsxs("svg", {
+            "aria-hidden": "true",
+            focusable: "false",
             width: "14",
             height: "14",
             viewBox: "0 0 24 24",
@@ -201,6 +204,8 @@ function CheckIcon() {
     let t0;
     if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
         t0 = /*#__PURE__*/ jsx("svg", {
+            "aria-hidden": "true",
+            focusable: "false",
             width: "18",
             height: "18",
             viewBox: "0 0 24 24",

package/dist/components/select/select.js

@@ -403,6 +403,7 @@ function ChevronDownIcon() {
             strokeLinecap: "round",
             strokeLinejoin: "round",
             "aria-hidden": "true",
+            focusable: "false",
             role: "presentation",
             children: /*#__PURE__*/ jsx("path", {
                 d: "m6 9 6 6 6-6"
@@ -426,6 +427,7 @@ function ChevronsUpDownIcon() {
             strokeLinecap: "round",
             strokeLinejoin: "round",
             "aria-hidden": "true",
+            focusable: "false",
             children: /*#__PURE__*/ jsx("path", {
                 d: "m7 15 5 5 5-5M7 9l5-5 5 5"
             })
@@ -448,6 +450,7 @@ function CheckIcon() {
             strokeLinecap: "round",
             strokeLinejoin: "round",
             "aria-hidden": "true",
+            focusable: "false",
             role: "presentation",
             children: /*#__PURE__*/ jsx("polyline", {
                 points: "20 6 9 17 4 12"
@@ -471,6 +474,7 @@ function CloseIcon() {
             strokeLinecap: "round",
             strokeLinejoin: "round",
             "aria-hidden": "true",
+            focusable: "false",
             role: "presentation",
             children: /*#__PURE__*/ jsx("path", {
                 d: "M18 6 6 18M6 6l12 12"
@@ -494,6 +498,7 @@ function SearchIcon() {
             strokeLinecap: "round",
             strokeLinejoin: "round",
             "aria-hidden": "true",
+            focusable: "false",
             role: "presentation",
             children: [
                 /*#__PURE__*/ jsx("circle", {
@@ -525,6 +530,7 @@ function LoadingIcon() {
             strokeLinecap: "round",
             strokeLinejoin: "round",
             "aria-hidden": "true",
+            focusable: "false",
             role: "presentation",
             children: /*#__PURE__*/ jsx("path", {
                 d: "M21 12a9 9 0 1 1-6.219-8.56"

package/dist/components/spinner/spinner.js

@@ -211,7 +211,8 @@ function DefaultIndicator() {
             "data-tao-spinner-svg": "",
             viewBox: "0 0 50 50",
             fill: "none",
-            "aria-hidden": true,
+            "aria-hidden": "true",
+            focusable: "false",
             children: /*#__PURE__*/ jsx("circle", {
                 cx: "25",
                 cy: "25",