@dvcol/neo-svelte 1.1.2 → 1.2.0

package/dist/buttons/NeoButtonRow.svelte

@@ -0,0 +1,137 @@
+<script lang="ts">
+  import type { NeoButtonGroupContext } from './neo-button-group.model.js';
+  import type { NeoButtonRowItem, NeoButtonRowProps } from './neo-button-row.model.js';
+  import type { NeoMenuItem } from '../floating/menu/neo-menu-list-item.model.js';
+
+  import { watch } from '@dvcol/svelte-utils/watch';
+  import { tick } from 'svelte';
+  import { innerHeight, innerWidth } from 'svelte/reactivity/window';
+
+  import { isButtonRowDivider } from './neo-button-row.model.js';
+  import NeoButton from './NeoButton.svelte';
+  import NeoButtonGroup from './NeoButtonGroup.svelte';
+  import NeoDivider from '../divider/NeoDivider.svelte';
+  import NeoMenu from '../floating/menu/NeoMenu.svelte';
+  import NeoIconBouncingDots from '../icons/NeoIconBouncingDots.svelte';
+
+  let {
+    // Snippets
+    children: innerChildren,
+    collapsed,
+
+    // State
+    items: buttons = [],
+    threshold = $bindable(0),
+
+    // Group props
+    ref = $bindable(),
+    offsetWidth = $bindable(),
+    offsetHeight = $bindable(),
+
+    // Button props
+    hovered = $bindable(false),
+    focused = $bindable(false),
+
+    // Other props
+    menuProps,
+    iconProps,
+    buttonProps,
+    collapseProps,
+    ...rest
+  }: NeoButtonRowProps = $props();
+
+  function buttonRowItemToMenuItem(item: NeoButtonRowItem, next?: NeoButtonRowItem): NeoMenuItem | undefined {
+    if (isButtonRowDivider(item)) return;
+    return {
+      id: item.id?.toString(),
+      label: item.label,
+      value: item.value,
+      before: item.icon,
+      reverse: item.reverse,
+      disabled: item.disabled,
+      readonly: item.readonly,
+      color: item.color || undefined,
+      href: item.href,
+      onclick: item.onclick,
+      divider: {
+        bottom: next && isButtonRowDivider(next),
+      },
+      ...(item.menuProps ?? {}),
+    };
+  }
+
+  const visible = $derived(threshold ? buttons?.slice(0, -threshold) : buttons);
+  const hidden = $derived(threshold ? buttons?.slice(-threshold) : []);
+  const items = $derived(
+    hidden?.map((t, i, arr) => buttonRowItemToMenuItem(t, arr[i + 1]))
+      .filter(Boolean) as NeoMenuItem[],
+  );
+
+  const isOverflown = (el?: Element) => {
+    if (!el || !buttons?.length) return false;
+    if (rest.vertical) return el.scrollHeight > el.clientHeight;
+    return el.scrollWidth > el.clientWidth;
+  };
+
+  const autoSize = async (el = ref) => {
+    threshold = 0;
+    await tick();
+    if (!el || !buttons?.length) return;
+    while (threshold < buttons.length && isOverflown(el)) {
+      threshold += 1;
+      await tick();
+    }
+  };
+
+  watch(
+    () => {
+      void autoSize();
+    },
+    () => [
+      rest.vertical,
+      offsetWidth,
+      offsetHeight,
+      innerWidth.current,
+      innerHeight.current,
+    ],
+  );
+</script>
+
+<NeoButtonGroup bind:ref bind:offsetWidth bind:offsetHeight nowrap {...rest}>
+  {#snippet children(ctx: NeoButtonGroupContext)}
+    {@render innerChildren?.(ctx, { items, threshold, menuProps, collapseProps, iconProps })}
+
+    {#each visible as _props, index (_props.id ?? index)}
+      {#if (isButtonRowDivider(_props))}
+        <NeoDivider vertical={!rest.vertical} {..._props} />
+      {:else}
+        <NeoButton {...buttonProps} {..._props} />
+      {/if}
+    {/each}
+
+    {#if items?.length && collapsed}
+      {@render collapsed(ctx, { items, threshold, menuProps, collapseProps, iconProps })}
+    {:else if items?.length}
+      <div class="neo-button-row-collapse">
+        <NeoMenu {items} openOnClick {...menuProps}>
+          <NeoButton bind:hovered bind:focused {...collapseProps}>
+            {#snippet icon()}
+              <NeoIconBouncingDots bounce={hovered || focused} {...iconProps} />
+            {/snippet}
+          </NeoButton>
+        </NeoMenu>
+      </div>
+    {/if}
+  {/snippet}
+</NeoButtonGroup>
+
+<style>.neo-button-row-collapse {
+  display: contents;
+}
+.neo-button-row-collapse :global(> .neo-tooltip-trigger) {
+  width: 100%;
+  height: 100%;
+}
+.neo-button-row-collapse :global(> .neo-tooltip-trigger) :global(svg) {
+  margin-inline: 0.25rem;
+}</style>

package/dist/buttons/NeoButtonRow.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { NeoButtonRowProps } from './neo-button-row.model.js';
+declare const NeoButtonRow: import("svelte").Component<NeoButtonRowProps, {}, "ref" | "hovered" | "focused" | "offsetHeight" | "offsetWidth" | "threshold">;
+type NeoButtonRow = ReturnType<typeof NeoButtonRow>;
+export default NeoButtonRow;

package/dist/buttons/NeoCancelButton.svelte

@@ -2,7 +2,7 @@
   import type { NeoIconButtonProps } from './neo-icon-button.model.js';
 
   import NeoButton from './NeoButton.svelte';
-  import IconCancel from '../icons/IconCancel.svelte';
+  import NeoIconCancel from '../icons/NeoIconCancel.svelte';
 
   let {
     // Button props
@@ -19,7 +19,7 @@
 </script>
 
 {#snippet icon()}
-  <IconCancel {...iconProps} />
+  <NeoIconCancel {...iconProps} />
 {/snippet}
 
 <div class="neo-cancel-button">

package/dist/buttons/NeoCheckboxButton.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">
   import type { NeoCheckboxButtonProps } from './neo-checkbox-button.model.js';
 
-  import IconCheckbox from '../icons/IconCheckbox.svelte';
+  import NeoIconCheckbox from '../icons/NeoIconCheckbox.svelte';
+  import { computeBorderRadius } from '../utils/border.utils.js';
   import { getColorVariable } from '../utils/colors.utils.js';
   import { coerce, computeShadowElevation, DefaultShadowShallowElevation, DefaultShallowMinMaxElevation } from '../utils/shadow.utils.js';
 
@@ -61,11 +62,12 @@
   style:--neo-checkbox-color={getColorVariable(color)}
   style:--neo-checkbox-box-shadow={boxShadow}
   style:--neo-checkbox-checked-shadow={checkedShadow}
+  style:--neo-checkbox-border-radius={computeBorderRadius(rounded)}
   {onclick}
   {...rest}
 >
   {@render children?.()}
-  <IconCheckbox circle={rounded} indeterminate={!!indeterminate} checked={!!checked} enter={touched} />
+  <NeoIconCheckbox circle={!!rounded} indeterminate={!!indeterminate} checked={!!checked} enter={touched} />
 </button>
 
 <style>.neo-checkbox-button {
@@ -79,7 +81,7 @@
   background-color: color-mix(in srgb, transparent, currentcolor 1%);
   background-clip: padding-box;
   border: var(--neo-checkbox-border-width, var(--neo-border-width, 1px)) var(--neo-checkbox-border-color, transparent) solid;
-  border-radius: var(--neo-border-radius-xs);
+  border-radius: var(--neo-checkbox-border-radius, var(--neo-border-radius-xs));
   outline: none;
   box-shadow: var(--neo-checkbox-box-shadow, var(--neo-box-shadow-raised-2));
   cursor: pointer;
@@ -151,7 +153,7 @@
   background-clip: padding-box;
   border-color: var(--neo-skeleton-color);
   opacity: 1;
-  transition: background-color 1s ease, color 0.3333333333s ease, border-color 1s ease, opacity 1s ease;
+  transition: border-radius 0.3333333333s ease, background-color 1s ease, color 0.3333333333s ease, border-color 1s ease, opacity 1s ease;
   animation: skeleton 3s var(--neo-transition-skeleton) infinite;
   animation-delay: 1s;
 }

package/dist/buttons/NeoCheckboxButton.svelte.d.ts

@@ -1,4 +1,4 @@
 import type { NeoCheckboxButtonProps } from './neo-checkbox-button.model.js';
-declare const NeoCheckboxButton: import("svelte").Component<NeoCheckboxButtonProps, {}, "checked" | "touched" | "indeterminate">;
+declare const NeoCheckboxButton: import("svelte").Component<NeoCheckboxButtonProps, {}, "checked" | "indeterminate" | "touched">;
 type NeoCheckboxButton = ReturnType<typeof NeoCheckboxButton>;
 export default NeoCheckboxButton;

package/dist/buttons/NeoCloseButton.svelte

@@ -1,8 +1,9 @@
 <script lang="ts">
-  import type { NeoIconButtonProps } from './neo-icon-button.model.js';
+  import type { NeoCloseButtonProps } from './neo-close-button.model.js';
 
   import NeoButton from './NeoButton.svelte';
-  import IconClose from '../icons/IconClose.svelte';
+  import NeoIconClose from '../icons/NeoIconClose.svelte';
+  import { getColorVariable } from '../utils/index.js';
 
   let {
     // Button props
@@ -11,26 +12,56 @@
     hovered = $bindable(false),
     focused = $bindable(false),
 
+    // States
+    hoverColor,
+    size,
+    inline,
+
     // Other Props
     iconProps,
     ...rest
-  }: NeoIconButtonProps = $props();
+  }: NeoCloseButtonProps = $props();
 
+  const iconSize = $derived.by(() => {
+    switch (size) {
+      case 'sm':
+        return 0.6875;
+      case 'md':
+        return 0.75;
+      case 'lg':
+        return 1;
+      default:
+        return 0.875;
+    }
+  });
 </script>
 
 {#snippet icon()}
-  <IconClose size="0.875rem" {...iconProps} />
+  <NeoIconClose size="{iconSize}rem" {...iconProps} />
 {/snippet}
 
-<div class="neo-close-button">
+<div
+  data-size={size}
+  class="neo-close-button"
+  class:neo-inline={inline}
+  style:--neo-close-color={getColorVariable(hoverColor)}
+>
   <NeoButton bind:ref bind:checked bind:hovered bind:focused {icon} {...rest} />
 </div>
 
 <style>.neo-close-button {
   display: contents;
-  --neo-btn-text-color-hover: var(--neo-close-color-hover, rgb(255 0 0 / 75%));
+  --neo-btn-text-color-hover: oklch(from var(--neo-close-color) l c h / 75%);
   --neo-btn-text-color-active: var(--neo-close-color, rgb(255 0 0));
 }
+.neo-close-button.neo-inline :global(.neo-button) {
+  margin-block: auto;
+}
+.neo-close-button[data-size=md], .neo-close-button[data-size=sm] {
+  --neo-btn-padding-empty: var(--neo-btn-close-padding, var(--neo-gap-3xs, 0.3125rem));
+  --neo-btn-padding: var(--neo-btn-close-padding, var(--neo-gap-3xs, 0.3125rem));
+  --neo-btn-margin: var(--neo-btn-close-margin, var(--neo-gap-3xs, 0.3125rem));
+}
 .neo-close-button > :global(.neo-button) :global(.neo-icon) {
   transition: rotate 0.3s ease-out;
 }

package/dist/buttons/NeoCloseButton.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { NeoIconButtonProps } from './neo-icon-button.model.js';
-declare const NeoCloseButton: import("svelte").Component<NeoIconButtonProps, {}, "ref" | "hovered" | "focused" | "checked">;
+import type { NeoCloseButtonProps } from './neo-close-button.model.js';
+declare const NeoCloseButton: import("svelte").Component<NeoCloseButtonProps, {}, "ref" | "hovered" | "focused" | "checked">;
 type NeoCloseButton = ReturnType<typeof NeoCloseButton>;
 export default NeoCloseButton;

package/dist/buttons/NeoRadioButton.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">
   import type { NeoRadioButtonProps } from './neo-radio-button.model.js';
 
-  import IconRadio from '../icons/IconRadio.svelte';
+  import NeoIconRadio from '../icons/NeoIconRadio.svelte';
+  import { computeBorderRadius } from '../utils/border.utils.js';
   import { getColorVariable } from '../utils/colors.utils.js';
   import { coerce, computeShadowElevation, DefaultShadowShallowElevation, DefaultShallowMinMaxElevation } from '../utils/shadow.utils.js';
 
@@ -59,11 +60,12 @@
   style:--neo-radio-color={getColorVariable(color)}
   style:--neo-radio-box-shadow={boxShadow}
   style:--neo-radio-checked-shadow={checkedShadow}
+  style:--neo-radio-border-radius={computeBorderRadius(rounded)}
   {onclick}
   {...rest}
 >
   {@render children?.()}
-  <IconRadio circle={rounded} scale={rounded ? 0.75 : 0.9} checked={!!checked} enter={touched} />
+  <NeoIconRadio circle={!!rounded} scale={rounded ? 0.75 : 0.9} checked={!!checked} enter={touched} />
 </button>
 
 <style>.neo-radio-button {
@@ -77,7 +79,7 @@
   background-color: color-mix(in srgb, transparent, currentcolor 1%);
   background-clip: padding-box;
   border: var(--neo-radio-border-width, var(--neo-border-width, 1px)) var(--neo-radio-border-color, transparent) solid;
-  border-radius: var(--neo-border-radius-xs);
+  border-radius: var(--neo-radio-border-radius, var(--neo-border-radius-xs));
   outline: none;
   box-shadow: var(--neo-radio-box-shadow, var(--neo-box-shadow-raised-2));
   cursor: pointer;
@@ -152,7 +154,7 @@
   background-clip: padding-box;
   border-color: var(--neo-skeleton-color);
   opacity: 1;
-  transition: background-color 1s ease, color 0.3333333333s ease, border-color 1s ease, opacity 1s ease;
+  transition: border-radius 0.3333333333s ease, background-color 1s ease, color 0.3333333333s ease, border-color 1s ease, opacity 1s ease;
   animation: skeleton 3s var(--neo-transition-skeleton) infinite;
   animation-delay: 1s;
 }

package/dist/buttons/NeoSwitchButton.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import type { NeoSwitchButtonContext, NeoSwitchButtonProps } from './neo-switch-button.model.js';
 
+  import { computeBorderRadius } from '../utils/border.utils.js';
   import { getColorVariable } from '../utils/colors.utils.js';
   import { coerce, computeShadowElevation, DefaultShadowShallowElevation, DefaultShallowMinMaxElevation } from '../utils/shadow.utils.js';
 
@@ -73,6 +74,7 @@
   style:--neo-switch-color={getColorVariable(color)}
   style:--neo-switch-box-shadow={boxShadow}
   style:--neo-switch-toggle-width="{toggleWidth}px"
+  style:--neo-switch-border-radius={computeBorderRadius(rounded)}
   {onclick}
   {...rest}
 >
@@ -162,10 +164,10 @@
   transition: color 0.3s ease, box-shadow 0.3s ease-out, border-radius 0.3s ease, border-color 0.3s ease, background-color 0.3s ease;
 }
 .neo-switch-button.neo-rounded {
-  border-radius: var(--neo-border-radius-lg);
+  border-radius: var(--neo-switch-border-radius, var(--neo-border-radius-xxl));
 }
 .neo-switch-button.neo-rounded .neo-switch-rail {
-  border-radius: var(--neo-border-radius-lg);
+  border-radius: var(--neo-switch-border-radius, var(--neo-border-radius-xxl));
 }
 .neo-switch-button.neo-valid {
   --neo-switch-checked-background: color-mix(in srgb, transparent, var(--neo-switch-valid-color, var(--neo-color-success)) 40%);
@@ -266,7 +268,7 @@
   background-clip: padding-box;
   border-color: var(--neo-skeleton-color);
   opacity: 1;
-  transition: background-color 1s ease, color 0.3333333333s ease, border-color 1s ease, opacity 1s ease;
+  transition: border-radius 0.3333333333s ease, background-color 1s ease, color 0.3333333333s ease, border-color 1s ease, opacity 1s ease;
   animation: skeleton 3s var(--neo-transition-skeleton) infinite;
   animation-delay: 1s;
 }

package/dist/buttons/index.d.ts

@@ -1,6 +1,7 @@
 export { default as NeoArrowButton } from './NeoArrowButton.svelte';
 export { default as NeoButton } from './NeoButton.svelte';
 export { default as NeoButtonGroup } from './NeoButtonGroup.svelte';
+export { default as NeoButtonRow } from './NeoButtonRow.svelte';
 export { default as NeoCancelButton } from './NeoCancelButton.svelte';
 export { default as NeoCheckboxButton } from './NeoCheckboxButton.svelte';
 export { default as NeoCloseButton } from './NeoCloseButton.svelte';
@@ -8,6 +9,7 @@ export { default as NeoRadioButton } from './NeoRadioButton.svelte';
 export { default as NeoSwitchButton } from './NeoSwitchButton.svelte';
 export type * from './neo-arrow-button.model.js';
 export type * from './neo-button-group.model.js';
+export type * from './neo-button-row.model.js';
 export type * from './neo-button.model.js';
 export type * from './neo-checkbox-button.model.js';
 export type * from './neo-radio-button.model.js';

package/dist/buttons/index.js

@@ -1,6 +1,7 @@
 export { default as NeoArrowButton } from './NeoArrowButton.svelte';
 export { default as NeoButton } from './NeoButton.svelte';
 export { default as NeoButtonGroup } from './NeoButtonGroup.svelte';
+export { default as NeoButtonRow } from './NeoButtonRow.svelte';
 export { default as NeoCancelButton } from './NeoCancelButton.svelte';
 export { default as NeoCheckboxButton } from './NeoCheckboxButton.svelte';
 export { default as NeoCloseButton } from './NeoCloseButton.svelte';

package/dist/buttons/neo-arrow-button.model.d.ts

@@ -1,12 +1,12 @@
 import type { NeoButtonProps } from './neo-button.model.js';
-import type { IconArrowProps } from '../icons/icon.model.js';
+import type { NeoIconArrowProps } from '../icons/neo-icon.model.js';
 export type NeoArrowButtonProps = NeoButtonProps & {
     /**
      * Optional arrow properties.
      */
-    arrowProps?: IconArrowProps;
+    arrowProps?: NeoIconArrowProps;
     /**
      * Arrow direction.
      */
-    direction?: IconArrowProps['direction'];
+    direction?: NeoIconArrowProps['direction'];
 };

package/dist/buttons/neo-button-group.model.d.ts

@@ -1,6 +1,7 @@
-import type { NeoButtonActiveElevation, NeoButtonBlur, NeoButtonHoverElevation } from '../index.js';
 import type { Snippet } from 'svelte';
+import type { NeoButtonActiveElevation, NeoButtonBlur, NeoButtonHoverElevation } from './neo-button.model.js';
 import type { HTMLActionProps } from '../utils/action.utils.js';
+import type { BorderRadiusInput } from '../utils/border.utils.js';
 import type { Color } from '../utils/colors.utils.js';
 import type { HTMLFlexProps, HTMLNeoBaseElement, HTMLRefProps } from '../utils/html-element.utils.js';
 import type { ShadowElevation, ShadowElevationString } from '../utils/shadow.utils.js';
@@ -73,7 +74,7 @@ export interface NeoButtonGroupContext {
     /**
      * If true, the button group will have a rounded border.
      */
-    rounded?: boolean;
+    rounded?: BorderRadiusInput;
     /**
      * Text color to use for the button.
      */
@@ -116,6 +117,14 @@ export type NeoButtonGroupProps<Tag extends keyof HTMLElementTagNameMap = 'div'>
      * @default 'div'
      */
     tag?: Tag | keyof HTMLElementTagNameMap;
+    /**
+     * The offset height of the button group.
+     */
+    offsetHeight?: HTMLElementTagNameMap[Tag]['offsetHeight'];
+    /**
+     * The offset width of the button group.
+     */
+    offsetWidth?: HTMLElementTagNameMap[Tag]['offsetWidth'];
     /**
      * If true, the buttons will not wrap to the next line.
      */
@@ -128,4 +137,4 @@ export type NeoButtonGroupProps<Tag extends keyof HTMLElementTagNameMap = 'div'>
      * Optional height constraints.
      */
     height?: SizeInput<'height'>;
-} & NeoButtonGroupContext & HTMLFlexProps & HTMLNeoBaseElement<HTMLElementTagNameMap[Tag]> & HTMLActionProps & HTMLRefProps;
+} & NeoButtonGroupContext & HTMLFlexProps & HTMLActionProps & HTMLRefProps & Omit<HTMLNeoBaseElement<HTMLElementTagNameMap[Tag]>, 'children'>;

package/dist/buttons/neo-button-row.model.d.ts

@@ -0,0 +1,33 @@
+import type { Snippet } from 'svelte';
+import type { NeoButtonGroupContext, NeoButtonGroupProps } from './neo-button-group.model.js';
+import type { NeoButtonProps } from './neo-button.model.js';
+import type { NeoDividerProps } from '../divider/neo-divider.model.js';
+import type { NeoMenuItem } from '../floating/menu/neo-menu-list-item.model.js';
+import type { NeoMenuProps } from '../floating/menu/neo-menu.model.js';
+import type { NeoIconBouncingDotsProps } from '../icons/neo-icon.model.js';
+export interface NeoButtonRowItemButton extends NeoButtonProps {
+    menuProps?: Partial<NeoMenuItem>;
+    label?: string | undefined;
+    icon?: Snippet<[unknown]>;
+}
+export interface NeoButtonRowItemDivider extends NeoDividerProps {
+    divider: true;
+}
+export type NeoButtonRowItem = NeoButtonRowItemButton | NeoButtonRowItemDivider;
+export declare const isButtonRowDivider: (item: NeoButtonRowItem) => item is NeoButtonRowItemDivider;
+export interface NeoButtonRowContext {
+    items?: NeoMenuItem[];
+    threshold?: number;
+    menuProps?: Partial<NeoMenuProps>;
+    iconProps?: NeoIconBouncingDotsProps;
+    collapseProps?: NeoButtonProps;
+}
+export interface NeoButtonRowProps extends Omit<NeoButtonRowContext, 'items'>, Omit<NeoButtonGroupProps, 'children'> {
+    children?: Snippet<[NeoButtonGroupContext, NeoButtonRowContext]>;
+    collapsed?: Snippet<[NeoButtonGroupContext, NeoButtonRowContext]>;
+    ref?: NeoButtonGroupProps['ref'];
+    items: NeoButtonRowItem[];
+    hovered?: NeoButtonProps['hovered'];
+    focused?: NeoButtonProps['focused'];
+    buttonProps?: NeoButtonProps;
+}

package/dist/buttons/neo-button-row.model.js

@@ -0,0 +1 @@
+export const isButtonRowDivider = (item) => item && 'divider' in item && item.divider;

package/dist/buttons/neo-button.model.d.ts

@@ -1,6 +1,8 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAnchorAttributes, HTMLButtonAttributes, KeyboardEventHandler } from 'svelte/elements';
+import type { NeoImageProps } from '../media/neo-image.model.js';
 import type { HTMLActionProps } from '../utils/action.utils.js';
+import type { BorderRadiusInput } from '../utils/border.utils.js';
 import type { Color } from '../utils/colors.utils.js';
 import type { HTMLFlexProps, HTMLNeoBaseElement, HTMLRefProps, SvelteEvent } from '../utils/html-element.utils.js';
 import type { BlurElevation, BlurElevationString, ShadowElevation, ShadowElevationString, ShadowHoverElevation, ShadowHoverElevationsString } from '../utils/shadow.utils.js';
@@ -39,9 +41,10 @@ export interface NeoButtonStates {
      */
     focused?: boolean;
     /**
-     * If true, only the icon (if any) will be displayed.
+     * If true, the button will not propagate the click event to its parent elements.
+     * This is useful for preventing unwanted side effects when clicking the button.
      */
-    empty?: boolean;
+    propagation?: boolean;
     /**
      * If true, the button will act as a toggle button.
      */
@@ -74,7 +77,7 @@ export type NeoButtonProps<Tag extends keyof HTMLElementTagNameMap = 'button'> =
     /**
      * Optional icon snippet to display before the text.
      */
-    icon?: Snippet<[NeoButtonContext]>;
+    icon?: Snippet<[NeoButtonContext]> | string;
     /**
      * The HTML tag to use for the button.
      * If an `href` is provided, the tag will default to `'a'`.
@@ -159,7 +162,7 @@ export type NeoButtonProps<Tag extends keyof HTMLElementTagNameMap = 'button'> =
     /**
      * If true, the button will have a rounded border.
      */
-    rounded?: boolean;
+    rounded?: BorderRadiusInput;
     /**
      * If true, the flex direction of the button will be reversed.
      */
@@ -201,6 +204,10 @@ export type NeoButtonProps<Tag extends keyof HTMLElementTagNameMap = 'button'> =
      * @param e
      */
     onkeyup?: KeyboardEventHandler<HTMLButtonElement>;
+    /**
+     * Optional props to pass to the icon image component if the icon is a string.
+     */
+    imageProps?: Partial<NeoImageProps>;
 } & NeoButtonStates & HTMLFlexProps & HTMLActionProps & HTMLRefProps & Partial<Omit<Tag extends 'button' ? HTMLButtonAttributes : Tag extends 'a' ? HTMLAnchorAttributes : HTMLNeoBaseElement<HTMLElementTagNameMap[Tag]>, 'onclick' | 'onkeydown' | 'onkeyup'>>;
 export type NeoButtonTemplate = Pick<NeoButtonProps, 'elevation' | 'hover' | 'active' | 'pressed' | 'borderless' | 'glass' | 'tinted' | 'rounded' | 'reverse' | 'coalesce' | 'pulse'>;
 export declare const NeoRaisedButton: NeoButtonTemplate;

package/dist/buttons/neo-close-button.model.d.ts

@@ -0,0 +1,13 @@
+import type { NeoIconButtonProps } from './neo-icon-button.model.js';
+import type { Color } from '../utils/colors.utils.js';
+export declare const NeoCloseButtonSize: {
+    readonly Small: "sm";
+    readonly Medium: "md";
+    readonly Large: "lg";
+};
+export type NeoCloseButtonSizes = (typeof NeoCloseButtonSize)[keyof typeof NeoCloseButtonSize];
+export interface NeoCloseButtonProps extends NeoIconButtonProps {
+    hoverColor?: Color | CSSStyleDeclaration['color'];
+    size?: NeoCloseButtonSizes;
+    inline?: boolean;
+}

package/dist/buttons/neo-close-button.model.js

@@ -0,0 +1,5 @@
+export const NeoCloseButtonSize = {
+    Small: 'sm',
+    Medium: 'md',
+    Large: 'lg',
+};

package/dist/buttons/neo-icon-button.model.d.ts

@@ -1,8 +1,8 @@
 import type { NeoButtonProps } from './neo-button.model.js';
-import type { IconProps } from '../icons/icon.model.js';
+import type { NeoIconProps } from '../icons/neo-icon.model.js';
 export type NeoIconButtonProps = NeoButtonProps & {
     /**
      * Optional icon properties.
      */
-    iconProps?: IconProps;
+    iconProps?: NeoIconProps;
 };