aidos-ui 5.0.9 → 5.0.11

package/dist/index.d.ts

@@ -269,6 +269,7 @@ interface BaseListItemProps extends Omit<RowProps, "children" | "jss" | "role">
     icon?: IconType;
     iconPosition?: Position;
     iconSize?: Size;
+    iconJss?: JSS;
     addOn?: ReactNode;
     disabled?: boolean;
     role?: undefined;
@@ -458,7 +459,7 @@ interface ListProps extends BaseListProps {
 }
 declare function List({ ariaLabel, jss, gap, autofocus, navigation, ...otherProps }: ListProps): react_jsx_runtime.JSX.Element;
 
-interface ListButtonItemProps extends Omit<BaseListItemProps, "children" | "onClick"> {
+interface ListButtonItemProps extends Omit<BaseListItemProps, "children" | "onClick" | "headlineColor" | "bodyColor"> {
     color?: InteractableColor;
     onClick: () => void;
     headline: string;
@@ -488,7 +489,7 @@ interface ListItemProps extends Omit<BaseListItemProps, "children"> {
 }
 declare const ListItem: React__default.ForwardRefExoticComponent<Omit<ListItemProps, "ref"> & React__default.RefAttributes<HTMLLIElement>>;
 
-interface ListLinkItemProps extends Omit<BaseListItemProps, "children" | "onClick"> {
+interface ListLinkItemProps extends Omit<BaseListItemProps, "children" | "onClick" | "headlineColor" | "bodyColor"> {
     color?: InteractableColor;
     children?: void;
     onClick?: () => void;
@@ -687,7 +688,7 @@ declare function useStream<Frame>({ render, bufferStart, bufferEnd, index, debou
     frame: Frame;
 };
 
-declare function Sublist({ children, label, labelBold, initialState, jss, secondaryAddOn, }: {
+declare function Sublist({ children, label, labelBold, initialState, jss, }: {
     children: React__default.ReactNode;
     label: string;
     labelBold?: boolean;
@@ -695,7 +696,6 @@ declare function Sublist({ children, label, labelBold, initialState, jss, second
         collapsed: boolean;
     };
     jss?: JSS;
-    secondaryAddOn?: ReactNode;
 }): react_jsx_runtime.JSX.Element;
 
 interface SubmitIconInputProps extends BaseInputProps {

package/dist/index.js

@@ -1221,6 +1221,7 @@ var getInteractableListItemJSS = ({
 var interactableListItemContentJSS = {
   overflow: "hidden",
   flexGrow: 1,
+  color: "inherit",
   textDecoration: "none",
   ":focus-visible": {
     outline: "none"
@@ -1380,6 +1381,7 @@ var BaseListAddOn = React35.forwardRef(function BaseListAddOn2({ jss, ...otherPr
           minWidth: 34,
           height: 34,
           flexShrink: 0,
+          alignSelf: "center",
           marginInlineEnd: cssVar("--spacing-m"),
           alignItems: "center",
           justifyContent: "center"
@@ -1488,6 +1490,7 @@ var BaseListItem = React35.forwardRef(function BaseListItem2({
   icon,
   iconPosition = "start",
   iconSize = "medium",
+  iconJss,
   addOn,
   disabled = false,
   padding = "medium",
@@ -1503,7 +1506,15 @@ var BaseListItem = React35.forwardRef(function BaseListItem2({
       headlineBold,
       padding,
       gap,
-      addOn: icon ? /* @__PURE__ */ jsx(Icon, { icon, size: iconSize, color: contentColor }) : void 0,
+      addOn: icon ? /* @__PURE__ */ jsx(
+        Icon,
+        {
+          icon,
+          size: iconSize,
+          color: contentColor,
+          jss: iconJss
+        }
+      ) : void 0,
       addOnPosition: iconPosition,
       headline,
       headlineSize,
@@ -1511,7 +1522,7 @@ var BaseListItem = React35.forwardRef(function BaseListItem2({
       headlineAddOn,
       body,
       bodySize,
-      bodyColor: disabled ? "subtle" : bodyColor,
+      bodyColor: disabled || selected ? contentColor : bodyColor,
       bodyEllipsis,
       grow: true,
       shrink: false
@@ -3316,17 +3327,18 @@ var ListButtonItem = React35.forwardRef(function ListButtonItem2({
   selected,
   ...otherProps
 }, ref) {
+  const glyphColor = getGlyphColor(color, disabled, true);
   return /* @__PURE__ */ jsx(
     BaseListItem,
     {
       disabled,
       padding: "none",
       gap,
-      headlineColor: getGlyphColor(color, disabled, true),
-      bodyColor: getGlyphColor(color, disabled, true),
       selected,
       "aria-selected": selected,
       ...otherProps,
+      headlineColor: glyphColor,
+      bodyColor: glyphColor,
       jss: [
         getInteractableListItemJSS({
           selected,
@@ -3392,6 +3404,7 @@ var ListLinkItem = React35.forwardRef(function ListLinkItem2({
   target,
   ...otherProps
 }, ref) {
+  const glyphColor = getGlyphColor(color, disabled, true);
   return /* @__PURE__ */ jsx(
     BaseListItem,
     {
@@ -3399,10 +3412,10 @@ var ListLinkItem = React35.forwardRef(function ListLinkItem2({
       "aria-selected": selected,
       padding: "none",
       gap,
-      headlineColor: getGlyphColor(color, disabled, true),
-      bodyColor: getGlyphColor(color, disabled, true),
       selected,
       ...otherProps,
+      headlineColor: glyphColor,
+      bodyColor: glyphColor,
       jss: [
         getInteractableListItemJSS({
           selected,
@@ -4399,8 +4412,7 @@ function Sublist({
   label,
   labelBold,
   initialState = { collapsed: false },
-  jss,
-  secondaryAddOn
+  jss
 }) {
   const [collapsed, setCollapsed] = React35.useState(initialState.collapsed);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -4411,24 +4423,12 @@ function Sublist({
         headlineBold: labelBold,
         onClick: () => setCollapsed((x) => !x),
         jss,
-        addOn: /* @__PURE__ */ jsxs(Row, { gap: "medium", align: "center", children: [
-          secondaryAddOn,
-          /* @__PURE__ */ jsx(
-            Box,
-            {
-              padding: "none",
-              jss: [
-                {
-                  transition: "transform 0.15s ease-in"
-                },
-                !collapsed && {
-                  transform: "rotateZ(90deg)"
-                }
-              ],
-              children: /* @__PURE__ */ jsx(Icon, { color: "inherit", size: "medium", icon: "chevron-right" })
-            }
-          )
-        ] }),
+        icon: "chevron-right",
+        iconPosition: "end",
+        iconJss: {
+          transition: "transform 0.15s ease-in",
+          ...!collapsed && { transform: "rotateZ(90deg)" }
+        },
         color: "secondary"
       }
     ),