feat(buttons): m3 appearance tweaks

src/react/components/ListButton.jsx

@@ -61,7 +61,7 @@ const ListButton = forwardRef((props, ref) => {
   };
 
   const c = themeClasses(
-    ListButtonClasses({ ...props, hairlines }, colors, className),
+    ListButtonClasses({ ...props, hairlines }, colors, className, theme),
     className
   );
 

src/react/components/ListItem.jsx

@@ -136,6 +136,7 @@ const ListItem = forwardRef((props, ref) => {
       },
       colors,
       {
+        theme,
         textColor,
         needsTouchRipple,
         isMenuListItemActive,

src/shared/classes/ButtonClasses.js

@@ -14,10 +14,17 @@ export const ButtonClasses = (props, colors, classes, darkClasses) => {
       ios: `uppercase duration-100 font-semibold`,
       material: `duration-300 font-medium`,
 
-      square:
-        segmented && !segmentedStrong
-          ? 'first:rounded-l last:rounded-r'
-          : 'rounded',
+      square: {
+        ios:
+          segmented && !segmentedStrong
+            ? 'first:rounded-l last:rounded-r'
+            : 'rounded',
+        material:
+          segmented && !segmentedStrong
+            ? 'first:rounded-lg-l last:rounded-lg-r'
+            : 'rounded-lg',
+      },
+
       rounded: segmented && !segmentedStrong ? '' : 'rounded-full',
     },
     style: {

src/svelte/components/ListButton.svelte

@@ -2,6 +2,7 @@
   import { useThemeClasses } from '../shared/use-theme-classes.js';
   import { useTouchRipple } from '../shared/use-touch-ripple.js';
   import { ListButtonClasses } from '../../shared/classes/ListButtonClasses.js';
+  import { useTheme } from '../shared/use-theme.js';
 
   let className = undefined;
   export { className as class };
@@ -28,6 +29,9 @@
 
   const rippleEl = { current: null };
 
+  let theme;
+  theme = useTheme({ ios, material }, (v) => (theme = v));
+
   $: useTouchRipple(rippleEl, touchRipple);
 
   $: colors = {
@@ -39,7 +43,7 @@
 
   $: c = useThemeClasses(
     { ios, material },
-    ListButtonClasses({ hairlines }, colors, className),
+    ListButtonClasses({ hairlines }, colors, className, theme),
     className,
     (v) => (c = v)
   );

src/svelte/components/ListItem.svelte

@@ -120,6 +120,7 @@
       },
       colors,
       {
+        theme,
         textColor,
         needsTouchRipple,
         isMenuListItemActive,

src/vue/components/ListButton.vue

@@ -13,6 +13,7 @@
 <script>
   import { ref, computed } from 'vue';
   import { ListButtonClasses } from '../../shared/classes/ListButtonClasses.js';
+  import { useTheme } from '../shared/use-theme.js';
   import { useThemeClasses } from '../shared/use-theme-classes.js';
   import { useTouchRipple } from '../shared/use-touch-ripple.js';
 
@@ -60,8 +61,10 @@
         ...(props.colors || {}),
       }));
 
+      const theme = useTheme(props);
+
       const c = useThemeClasses(props, () =>
-        ListButtonClasses(props, colors.value, ctx.attrs.class)
+        ListButtonClasses(props, colors.value, ctx.attrs.class, theme.value)
       );
 
       const isLink = computed(() => !!props.href || props.href === '');

src/vue/components/ListItem.vue

@@ -193,6 +193,7 @@
 
       const c = useThemeClasses(props, () =>
         ListItemClasses(props, colors.value, {
+          theme: theme.value,
           textColor: textColor.value,
           needsTouchRipple: needsTouchRipple.value,
           isMenuListItemActive: isMenuListItemActive.value,