@noxlovette/material 0.1.19 → 0.1.21

package/dist/actions/index.d.ts

@@ -1,4 +1,5 @@
 export * from './clickOutside.js';
 export * from './floating.js';
 export * from './keyboard.js';
+export * from './portal.js';
 export * from './positionFloating.js';

package/dist/actions/index.js

@@ -1,4 +1,5 @@
 export * from './clickOutside.js';
 export * from './floating.js';
 export * from './keyboard.js';
+export * from './portal.js';
 export * from './positionFloating.js';

package/dist/actions/portal.d.ts

@@ -0,0 +1,3 @@
+export declare function portal(node: HTMLElement, target?: HTMLElement): {
+    destroy(): void;
+};

package/dist/actions/portal.js

@@ -0,0 +1,8 @@
+export function portal(node, target = document.body) {
+    target.appendChild(node);
+    return {
+        destroy() {
+            node.remove();
+        }
+    };
+}

package/dist/components/buttons/FAB.svelte

@@ -35,6 +35,7 @@ Floating action buttons (FABs) help people take primary actions.
   const { base, icon, label: labelClass } = $derived(fab({ size, config, expanded }));
 
   let showMenu = $state(false);
+  let wrapperEl = $state<HTMLElement | null>(null);
 
   const btnCls = $derived(
     base({
@@ -58,7 +59,7 @@ Floating action buttons (FABs) help people take primary actions.
   }
 </script>
 
-<div class="contents" use:clickOutside={() => (showMenu = false)}>
+<div class="contents" bind:this={wrapperEl} use:clickOutside={() => (showMenu = false)}>
   <Button.Root
     {disabled}
     {formaction}
@@ -76,8 +77,8 @@ Floating action buttons (FABs) help people take primary actions.
     {/if}
   </Button.Root>
 
-  {#if withMenu && showMenu}
-    <FABMenu>
+  {#if withMenu && showMenu && wrapperEl?.firstElementChild}
+    <FABMenu anchorEl={wrapperEl.firstElementChild as HTMLElement}>
       {@render children?.()}
     </FABMenu>
   {/if}

package/dist/components/buttons/FABMenu.svelte

@@ -5,69 +5,31 @@ Should be used with `FABMenuItem` as children.
 -->
 <script lang="ts">
   import clsx from 'clsx';
+  import { flip } from '@floating-ui/dom';
   import { fabMenu } from './theme.js';
   import type { FABMenuProps } from './types.js';
   import { enterExit } from '../../animation/enterExit.js';
-  import { easeEmphasizedDecel } from '../../animation/easing.js';
+  import { easeEmphasizedAccel, easeEmphasizedDecel } from '../../animation/easing.js';
+  import { floating, portal } from '../../actions/index.js';
 
-  let { children, class: className, ...restProps }: FABMenuProps = $props();
+  let { children, class: className, anchorEl, ...restProps }: FABMenuProps = $props();
 
   const { base } = fabMenu();
-
-  const margin = 8;
-  const gap = 8;
-  let coords = $state({
-    x: 0,
-    y: 0,
-    originX: 'right',
-    originY: 'bottom',
-    maxHeight: 0
-  });
 </script>
 
 <ul
   data-cy="m3-fab-menu"
   {...restProps}
-  class={base({
-    class: clsx(className, 'fab-menu overflow-y-auto')
-  })}
+  class={base({ class: clsx(className, 'fab-menu overflow-y-auto') })}
   in:enterExit={{ duration: 300, easing: easeEmphasizedDecel, mode: 'scale' }}
-  style:translate={`${coords.x}px ${coords.y}px`}
-  style:max-height={coords.maxHeight ? `${coords.maxHeight}px` : undefined}
-  style:--enter-exit-origin={`${coords.originY} ${coords.originX}`}
-  {@attach (menu) => {
-    const anchorEl = menu.previousElementSibling as HTMLElement;
-    if (!anchorEl) return;
-
-    const anchorRect = anchorEl.getBoundingClientRect();
-    const rect = menu.getBoundingClientRect();
-
-    const spaceAbove = anchorRect.top - gap - margin;
-    const spaceBelow = window.innerHeight - margin - (anchorRect.bottom + gap);
-    const placeAbove = spaceAbove >= rect.height || spaceAbove >= Math.max(0, spaceBelow);
-
-    let maxHeight = placeAbove ? spaceAbove : spaceBelow;
-    maxHeight = Math.max(0, Math.min(rect.height, maxHeight));
-
-    const targetTop = placeAbove ? anchorRect.top - gap - maxHeight : anchorRect.bottom + gap;
-
-    let targetLeft = anchorRect.right - rect.width;
-    if (targetLeft + rect.width > window.innerWidth - margin) {
-      targetLeft = window.innerWidth - margin - rect.width;
-    }
-    if (targetLeft < margin) targetLeft = margin;
-
-    let clampedTop = targetTop;
-    if (clampedTop < margin) clampedTop = margin;
-    if (clampedTop + maxHeight > window.innerHeight - margin) {
-      clampedTop = window.innerHeight - margin - maxHeight;
-    }
-
-    const originY = placeAbove ? 'bottom' : 'top';
-    const originX =
-      anchorRect.left + anchorRect.width / 2 < targetLeft + rect.width / 2 ? 'left' : 'right';
-
-    coords = { x: targetLeft, y: clampedTop, originX, originY, maxHeight };
+  out:enterExit={{ duration: 200, easing: easeEmphasizedAccel, mode: 'scale' }}
+  use:portal
+  use:floating={{
+    reference: anchorEl,
+    strategy: 'fixed',
+    placement: 'top-end',
+    offsetPx: 8,
+    middleware: [flip()]
   }}
 >
   {@render children()}
@@ -75,6 +37,6 @@ Should be used with `FABMenuItem` as children.
 
 <style>
   .fab-menu {
-    transform-origin: var(--enter-exit-origin, bottom right);
+    transform-origin: bottom right;
   }
 </style>

package/dist/components/buttons/Toggle.svelte

@@ -27,8 +27,6 @@ Uses Material 3 selection button styling.
 
   const { base, icon } = $derived(
     button({
-      variant: 'filled',
-      color: 'default',
       usage: 'selection',
       shape,
       size,

package/dist/components/buttons/theme.js

@@ -66,7 +66,7 @@ export const button = tv({
         {
             usage: 'selection',
             selected: false,
-            class: { base: 'bg-md-sys-color-surface-container' }
+            class: { base: 'bg-md-sys-color-surface-container-high text-md-sys-color-on-surface-variant' }
         },
         {
             variant: 'text',
@@ -275,7 +275,7 @@ export const buttonIcon = tv({
         {
             variation: 'toggle',
             selected: false,
-            class: { base: 'bg-md-sys-color-surface-container' }
+            class: { base: 'bg-md-sys-color-surface-container-high text-md-sys-color-on-surface-variant' }
         },
         {
             variant: 'text',
@@ -474,7 +474,7 @@ export const fab = tv({
 });
 export const fabMenu = tv({
     slots: {
-        base: 'gap-2 pb-2 flex flex-col fixed left-0 top-0 z-[9999] overflow-visible p-1'
+        base: 'gap-2 pb-2 flex flex-col z-[9999] overflow-visible p-1'
     }
 });
 export const fabMenuItem = tv({

package/dist/components/buttons/types.d.ts

@@ -158,6 +158,8 @@ export type FABProps = FABVariants & AnchorButtonAttributes & {
     children?: Snippet;
 };
 export type FABMenuProps = HTMLAttributes<HTMLUListElement> & {
+    /** The FAB button element to position the menu relative to. */
+    anchorEl: HTMLElement;
     /**
      * The menu items. Use `FABMenuItem` components.
      */

package/dist/components/containers/menu-item/MenuItem.svelte

@@ -19,7 +19,6 @@ and `ContextMenu`, which owns its own item list and is right-click triggered.
   import Icon from '../../../utils/icon/Icon.svelte';
   import Layer from '../../../utils/Layer.svelte';
   import { DropdownMenu } from 'bits-ui';
-  import clsx from 'clsx';
   import { tv } from 'tailwind-variants';
 
   let {

package/dist/components/containers/panes/SupportingPane.svelte

@@ -49,6 +49,7 @@ SupportingPane provides a layout with a main content area and a supporting side
       <div class="top-3 right-3 z-10 hidden h-12 w-12 md:absolute md:block">
         <ButtonIcon
           triggerClass=""
+          type="button"
           variant="text"
           tooltipContent={supportingVisible ? 'Скрыть панель' : 'Показать панель'}
           size="sm"

package/dist/components/containers/side-sheet/SideSheet.svelte

@@ -15,7 +15,7 @@ Side sheets are supplementary surfaces which are anchored to the edge of the scr
   <div class="flex items-center justify-between p-6">
     <span class="md-sys-typescale-title-large text-md-sys-color-on-surface-variant">{headline}</span
     >
-    <ButtonIcon variant="text" iconProps={{ name: 'close' }} onclick={close} />
+    <ButtonIcon type="button" variant="text" iconProps={{ name: 'close' }} onclick={close} />
   </div>
   {@render children()}
 </div>

package/dist/components/date/DateField.svelte

@@ -104,11 +104,11 @@ DateField is a text field that allows users to enter a date or pick it from a ca
             class="text-md-sys-color-on-surface-variant z-10 flex w-full items-center justify-between pb-7.5"
           >
             <DatePicker.PrevButton>
-              <ButtonIcon iconProps={{ name: 'chevron_left' }} />
+              <ButtonIcon type="button" iconProps={{ name: 'chevron_left' }} />
             </DatePicker.PrevButton>
             <DatePicker.Heading class="md-sys-typescale-label-large" />
             <DatePicker.NextButton>
-              <ButtonIcon iconProps={{ name: 'chevron_right' }} />
+              <ButtonIcon type="button" iconProps={{ name: 'chevron_right' }} />
             </DatePicker.NextButton>
           </DatePicker.Header>
 

package/dist/components/date/DateRangeField.svelte

@@ -153,11 +153,11 @@ segment inputs and a shared calendar popover.
           class="text-md-sys-color-on-surface-variant z-10 flex w-full items-center justify-between pb-7.5"
         >
           <DateRangePicker.PrevButton>
-            <ButtonIcon iconProps={{ name: 'chevron_left' }} />
+            <ButtonIcon type="button" iconProps={{ name: 'chevron_left' }} />
           </DateRangePicker.PrevButton>
           <DateRangePicker.Heading class="md-sys-typescale-label-large" />
           <DateRangePicker.NextButton>
-            <ButtonIcon iconProps={{ name: 'chevron_right' }} />
+            <ButtonIcon type="button" iconProps={{ name: 'chevron_right' }} />
           </DateRangePicker.NextButton>
         </DateRangePicker.Header>
 

package/dist/components/forms/textfield/Textfield.svelte

@@ -68,7 +68,11 @@ Text fields allow users to enter and edit text.
     {#if trailingIcon}
       {@render trailingIcon()}
     {:else if trailingIconProps}
-      <ButtonIcon onclick={trailingOnClick} class={cls.trailingIcon()} iconProps={trailingIconProps}
+      <ButtonIcon
+        type="button"
+        onclick={trailingOnClick}
+        class={cls.trailingIcon()}
+        iconProps={trailingIconProps}
       ></ButtonIcon>
     {/if}
   </div>

package/dist/components/time/TimepickerInput.svelte

@@ -58,7 +58,7 @@ It follows the Material 3 design for time input pickers.
   </TimeField.Root>
 
   <div class={cls.buttonDiv()}>
-    <ButtonIcon iconProps={{ name: 'schedule' }} />
+    <ButtonIcon type="button" iconProps={{ name: 'schedule' }} />
     <div>
       <Button variant="text" type="button" onclick={() => close()}>Отмена</Button>
       <Button

package/package.json

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