@loomhq/lens 12.5.0 → 12.6.0

package/dist/cjs/index.js

@@ -5699,7 +5699,7 @@ var SwitchInput = import_styled26.default.input`
   height: ${(props) => sizes2[props.switchSize].switchHeight}px;
 
   &:focus-visible ~ .SwitchBox {
-    ${getFocusRing()};
+    ${getOffsetFocusRing()};
   }
   &:not(:checked) {
     & + .SwitchBox {
@@ -5750,14 +5750,16 @@ var Switch = (_a) => {
     onChange,
     size = "medium",
     ariaLabelledby,
-    ariaLabel
+    ariaLabel,
+    ariaDescribedby
   } = _b, props = __objRest(_b, [
     "isActive",
     "isDisabled",
     "onChange",
     "size",
     "ariaLabelledby",
-    "ariaLabel"
+    "ariaLabel",
+    "ariaDescribedby"
   ]);
   if (ariaLabelledby && ariaLabel) {
     throw new Error(
@@ -5774,6 +5776,7 @@ var Switch = (_a) => {
       switchSize: size,
       "aria-labelledby": ariaLabelledby,
       "aria-label": ariaLabel,
+      "aria-describedby": ariaDescribedby,
       "aria-checked": isActive
     })
   ), /* @__PURE__ */ import_react33.default.createElement(
@@ -6865,20 +6868,22 @@ var ListRow = (_a) => {
     className,
     backgroundColor,
     onClick,
-    href
+    href,
+    role
   } = _b, props = __objRest(_b, [
     "children",
     "htmlTag",
     "className",
     "backgroundColor",
     "onClick",
-    "href"
+    "href",
+    "role"
   ]);
   const classNameFromProp = className ? ` ${className}` : ``;
   return /* @__PURE__ */ import_react48.default.createElement(
     ListRowWrapper,
     __spreadValues({
-      role: "row",
+      role,
       className: `ListRowWrapper${classNameFromProp}`,
       as: htmlTag,
       backgroundColor,
@@ -6929,7 +6934,7 @@ var Wrapper = import_styled35.default.div`
   ${(props) => props.scrollOffset && `margin: 0 ${negativeScrollOffset(props.scrollOffset)};
   `};
 `;
-var TabsNav = import_styled35.default.nav`
+var TabsNav = import_styled35.default.div`
   --activeIndicatorHeight: 3px;
 
   display: flex;
@@ -6945,32 +6950,20 @@ var TabsNav = import_styled35.default.nav`
     display: none;
   }
 
-  li {
+  > * {
     ${(props) => props.hasFullTabs && `flex: 1 0`};
     &:not(:first-of-type) {
       margin-left: 1rem;
     }
   }
 
-  li > * {
-    width: 100%;
-  }
-
-  ul {
-    display: flex;
-    list-style: none;
-    padding: 0;
-    margin: 0;
-    width: 100%;
-  }
-
-  ul:after {
+  ::after {
     content: '';
     flex-shrink: 0;
     ${(props) => props.scrollOffset && getSize("width", props.scrollOffset)};
   }
 `;
-var TabsNavPilled = import_styled35.default.nav`
+var TabsNavPilled = import_styled35.default.div`
   ${getRadius("200")};
   background-color: var(--lns-color-backgroundSecondary);
 
@@ -6986,23 +6979,11 @@ var TabsNavPilled = import_styled35.default.nav`
     display: none;
   }
 
-  li {
+  * {
     flex: 1 0;
   }
 
-  li > * {
-    width: 100%;
-  }
-
-  ul {
-    display: flex;
-    list-style: none;
-    padding: 0;
-    margin: 0;
-    width: 100%;
-  }
-
-  ul:after {
+  ::after {
     content: '';
     flex-shrink: 0;
     ${(props) => props.scrollOffset && getSize("width", props.scrollOffset)};
@@ -7108,18 +7089,31 @@ var Tab = (_a) => {
   ]);
   const { isPilledDesign } = import_react49.default.useContext(TabsContext);
   if (isPilledDesign) {
-    return /* @__PURE__ */ import_react49.default.createElement("li", null, /* @__PURE__ */ import_react49.default.createElement(
+    return /* @__PURE__ */ import_react49.default.createElement(
       TabWrapperPilled,
       __spreadValues({
         as: htmlTag,
         isActive,
-        icon
+        icon,
+        role: "tab",
+        "aria-selected": isActive
       }, props),
       icon && /* @__PURE__ */ import_react49.default.createElement(container_default, { htmlTag: "span", paddingRight: children && "small" }, /* @__PURE__ */ import_react49.default.createElement(icon_default, { icon, color: "currentColor" })),
       children
-    ));
+    );
   }
-  return /* @__PURE__ */ import_react49.default.createElement("li", null, /* @__PURE__ */ import_react49.default.createElement(TabWrapper, __spreadValues({ as: htmlTag, isActive, icon }, props), icon && /* @__PURE__ */ import_react49.default.createElement(container_default, { htmlTag: "span", paddingRight: children && "small" }, /* @__PURE__ */ import_react49.default.createElement(icon_default, { icon, color: "currentColor" })), children));
+  return /* @__PURE__ */ import_react49.default.createElement(
+    TabWrapper,
+    __spreadValues({
+      as: htmlTag,
+      isActive,
+      icon,
+      role: "tab",
+      "aria-selected": isActive
+    }, props),
+    icon && /* @__PURE__ */ import_react49.default.createElement(container_default, { htmlTag: "span", paddingRight: children && "small" }, /* @__PURE__ */ import_react49.default.createElement(icon_default, { icon, color: "currentColor" })),
+    children
+  );
 };
 var Tabs = (_a) => {
   var _b = _a, {
@@ -7127,37 +7121,31 @@ var Tabs = (_a) => {
     scrollOffset,
     hasFullTabs,
     isPilledDesign,
-    hasBottomBorder = false,
-    role,
-    ariaOrientation
+    hasBottomBorder = false
   } = _b, props = __objRest(_b, [
     "children",
     "scrollOffset",
     "hasFullTabs",
     "isPilledDesign",
-    "hasBottomBorder",
-    "role",
-    "ariaOrientation"
+    "hasBottomBorder"
   ]);
   const tabsContent = isPilledDesign ? /* @__PURE__ */ import_react49.default.createElement(
     TabsNavPilled,
     __spreadValues({
       hasFullTabs,
       scrollOffset,
-      role,
-      "aria-orientation": ariaOrientation
+      role: "tablist"
     }, props),
-    /* @__PURE__ */ import_react49.default.createElement("ul", null, children)
+    children
   ) : /* @__PURE__ */ import_react49.default.createElement(
     TabsNav,
     __spreadValues({
       hasFullTabs,
       scrollOffset,
       hasBottomBorder,
-      role,
-      "aria-orientation": ariaOrientation
+      role: "tablist"
     }, props),
-    /* @__PURE__ */ import_react49.default.createElement("ul", null, children)
+    children
   );
   if (scrollOffset) {
     return /* @__PURE__ */ import_react49.default.createElement(Wrapper, { scrollOffset }, tabsContent);