@noxlovette/material 0.1.8 → 0.1.10

package/dist/components/buttons/Button.svelte

@@ -36,7 +36,13 @@ Buttons help people take actions, such as sending an email, sharing a document,
   const btnCls = $derived(base({ class: clsx(className) }));
 </script>
 
-<Button.Root {disabled} {formaction} class={btnCls} {...restProps as ButtonRootProps}>
+<Button.Root
+  {disabled}
+  {formaction}
+  class={btnCls}
+  data-cy="m3-button"
+  {...restProps as ButtonRootProps}
+>
   {#if iconProps}
     {#if loading}
       <LoadingIndicator container={variant === 'filled'} class={icon()} />

package/dist/components/buttons/ButtonIcon.svelte

@@ -49,14 +49,16 @@ Icon buttons help people take minor actions and are often used in app bars.
 </script>
 
 <Tooltip {triggerClass} variant="snack" supportingText={tooltipContent}>
-  {#snippet trigger()}
+  {#snippet trigger(triggerAttrs)}
     {#if variation === 'toggle'}
       <Toggle.Root
         bind:pressed
         {onPressedChange}
         {disabled}
         class={btnCls}
+        data-cy="m3-button-icon"
         {...restProps as ToggleRootProps}
+        {...triggerAttrs}
       >
         {#if loading}
           <LoadingIndicator />
@@ -66,7 +68,14 @@ Icon buttons help people take minor actions and are often used in app bars.
         {/if}
       </Toggle.Root>
     {:else}
-      <Button.Root {disabled} {formaction} class={btnCls} {...restProps as ButtonRootProps}>
+      <Button.Root
+        {disabled}
+        {formaction}
+        class={btnCls}
+        data-cy="m3-button-icon"
+        {...restProps as ButtonRootProps}
+        {...triggerAttrs}
+      >
         {#if loading}
           <LoadingIndicator />
         {:else}

package/dist/components/buttons/FAB.svelte

@@ -68,6 +68,7 @@ Floating action buttons (FABs) help people take primary actions.
     {formaction}
     class={btnCls}
     onclick={handleClick}
+    data-cy="m3-fab"
     {...restProps as ButtonRootProps}
   >
     <Icon {...iconProps} class={icon()} />

package/dist/components/buttons/FABMenu.svelte

@@ -28,6 +28,7 @@ Should be used with `FABMenuItem` as children.
 </script>
 
 <ul
+  data-cy="m3-fab-menu"
   {...restProps}
   class={base({
     class: clsx(className, 'fab-menu overflow-y-auto')

package/dist/components/buttons/FABMenuItem.svelte

@@ -23,7 +23,12 @@ An individual action within a FAB menu.
   const btnCls = $derived(base({ class: clsx(className) }));
 </script>
 
-<Button.Root {formaction} class={btnCls} {...restProps as ButtonRootProps}>
+<Button.Root
+  {formaction}
+  class={btnCls}
+  data-cy="m3-fab-menu-item"
+  {...restProps as ButtonRootProps}
+>
   {#if iconProps}
     {#if loading}
       <LoadingIndicator />

package/dist/components/buttons/Toggle.svelte

@@ -44,6 +44,7 @@ Uses Material 3 selection button styling.
   {onPressedChange}
   {disabled}
   class={btnCls}
+  data-cy="m3-toggle"
   {...restProps as ToggleRootProps}
 >
   {#if iconProps}

package/dist/components/cards/Card.svelte

@@ -27,12 +27,12 @@ and serve as an entry point to more detailed information.
 </script>
 
 {#if href}
-  <a {href} class={base({ class: clsx(className) })} {...restProps}>
+  <a {href} class={base({ class: clsx(className) })} data-cy="m3-card" {...restProps}>
     {#if hoverable}<Layer />{/if}
     {@render children?.()}
   </a>
 {:else}
-  <div class={base({ class: clsx(className) })} {...restProps}>
+  <div class={base({ class: clsx(className) })} data-cy="m3-card" {...restProps}>
     {#if hoverable}<Layer />{/if}
     {@render children?.()}
   </div>

package/dist/components/forms/multipart/Multipart.svelte

@@ -516,7 +516,6 @@ Follows Material 3 design principles for file uploaders.
 
 <Dialogue
   open={!!fileToRemove}
-  toggle={() => (fileToRemove = null)}
   onconfirm={() => {
     if (fileToRemove) {
       removeFile(fileToRemove);

package/dist/components/forms/tooltip/Tooltip.svelte

@@ -51,8 +51,13 @@ Plain tooltips are used for simple labels, while rich tooltips can contain forma
 </script>
 
 <Tooltip.Root {...restProps} {delayDuration} bind:open={isOpen}>
-  <Tooltip.Trigger {...triggerProps} class={triggerCls({ class: clsx(triggerClass) })}>
-    {@render trigger?.()}
+  <Tooltip.Trigger {...triggerProps}>
+    {#snippet child({ props })}
+      {@render trigger?.({
+        ...props,
+        class: triggerCls({ class: clsx(triggerClass, props.class as string) })
+      })}
+    {/snippet}
   </Tooltip.Trigger>
   <Tooltip.Portal>
     {#if showArrow}

package/dist/components/forms/tooltip/types.d.ts

@@ -9,7 +9,7 @@ export type TooltipProps = TooltipVariants & TooltipRootProps & {
     /** Secondary text providing additional context */
     supportingText?: string | null;
     /** The element that triggers the tooltip on hover or focus */
-    trigger?: Snippet;
+    trigger?: Snippet<[Record<string, unknown>]>;
     /** CSS class applied to the trigger element */
     triggerClass?: string;
     /** Additional props passed to the underlying Tooltip.Trigger component */

package/dist/components/misc/Avatar.svelte

@@ -47,7 +47,7 @@ Avatars can be used to represent people or objects.
 </script>
 
 {#if onclick}
-  <button class={button({ class: rootClasses })} {onclick} type="button">
+  <button class={button({ class: rootClasses })} {onclick} type="button" data-cy="m3-avatar">
     <Layer />
     <AvatarPrimitive.Root {...rest} bind:loadingStatus class="h-full w-full">
       {#if src}
@@ -59,7 +59,7 @@ Avatars can be used to represent people or objects.
     </AvatarPrimitive.Root>
   </button>
 {:else}
-  <AvatarPrimitive.Root {...rest} bind:loadingStatus class={rootClasses}>
+  <AvatarPrimitive.Root {...rest} bind:loadingStatus class={rootClasses} data-cy="m3-avatar">
     {#if src}
       <AvatarPrimitive.Image {src} {alt} class={image()} />
     {/if}

package/dist/components/progress/CircularProgress.svelte

@@ -24,7 +24,7 @@ Material 3 Circular Progress Indicator.
   let circumference = $derived(Math.PI * r * 2);
 </script>
 
-<Progress.Root value={percent ?? null} max={100}>
+<Progress.Root value={percent ?? null} max={100} data-cy="m3-circular-progress">
   {#snippet child({ props })}
     <svg
       {...props}

package/dist/components/progress/LinearProgress.svelte

@@ -37,6 +37,7 @@ Material 3 Linear Progress Indicator.
   max={100}
   class={container({ class: clsx(className) })}
   style="height: {height / 16}rem"
+  data-cy="m3-linear-progress"
 >
   {#if percent != null}
     <div class={fill()} style:width="{percent}%"></div>

package/dist/components/snackbar/Snackbar.svelte

@@ -61,7 +61,7 @@ Snackbars provide brief messages about app processes at the bottom of the screen
 {#if message && !dismissed}
   <div
     class={base()}
-    data-cy="notification-snackbar"
+    data-cy="m3-snackbar"
     {...restProps}
     in:enterExit={{
       duration: 400,
@@ -100,7 +100,7 @@ Snackbars provide brief messages about app processes at the bottom of the screen
             }
           }}
           aria-label="Dismiss snackbar"
-          data-cy="notification-dismiss"
+          data-cy="m3-snackbar-dismiss"
         >
           <Icon class={icon()} name="close" />
           <Layer />

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@noxlovette/material",
-  "version": "0.1.8",
+  "version": "0.1.10",
   "type": "module",
   "license": "MIT",
   "repository": {