@dvcol/neo-svelte 0.1.9 → 0.1.11

package/CHANGELOG.md

@@ -2,6 +2,60 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [0.1.11](https://github.com/dvcol/neo-svelte/compare/v0.1.10...v0.1.11) (2025-03-06)
+
+
+### Features
+
+* **accordion:** adds accordion styling for collapse ([ef3ae15](https://github.com/dvcol/neo-svelte/commit/ef3ae155ee55c1b3b801fc5e5fe68d47db5ec223))
+* **collapse:** adds base neo-collapse ([7038e5d](https://github.com/dvcol/neo-svelte/commit/7038e5d07f89bcebc33bd692db26124908942eee))
+* **collapse:** adds collapse-groups ([2cb2844](https://github.com/dvcol/neo-svelte/commit/2cb28440a3a55272e34bdad8047bd8a411be978b))
+* **collapse:** adds min/max strategy ([0d91033](https://github.com/dvcol/neo-svelte/commit/0d91033ac5f9304b7a79cd0fce62b834fb09928d))
+* **collapse:** style base collapse ([b3a1b99](https://github.com/dvcol/neo-svelte/commit/b3a1b99f3af34fc2d7f47d7a11625ff5683d158c))
+* **form:** adds neo-form & neo-fieldset ([527eeb9](https://github.com/dvcol/neo-svelte/commit/527eeb91039686a698ae2c87489176d6a1be6f2d))
+* **form:** support form name and registration opt-out ([ec854bb](https://github.com/dvcol/neo-svelte/commit/ec854bb379e8fb7f734e6b35289b9ecc64a2d099))
+* **stepper:** adds arrow button & exports ([dce7eef](https://github.com/dvcol/neo-svelte/commit/dce7eefe151f69424a52caf4e7e7654c03d4be12))
+* **stepper:** adds simple stepper component ([389b16d](https://github.com/dvcol/neo-svelte/commit/389b16d400a6ada7c5f18f9f10f2591f7aa0c238))
+* **stepper:** adds support for async step transiitons ([7c7dfc9](https://github.com/dvcol/neo-svelte/commit/7c7dfc9f57c66ab4aa7c45be783e2a362b1dace8))
+* **stepper:** adds touch support ([a9f98ee](https://github.com/dvcol/neo-svelte/commit/a9f98eee7f09e81ffafe829da89e94ec9ad3b1e8))
+* **tooltip:** adds popconfirm ([8f69873](https://github.com/dvcol/neo-svelte/commit/8f69873532d9d76c1fc66ca69b09166a9c652e44))
+
+
+### Bug Fixes
+
+* **accordion:** adds sizing props ([fe2ccec](https://github.com/dvcol/neo-svelte/commit/fe2ccec2eaafdb1ac1c76eb3d0f478016af1542b))
+* **accordion:** adjust collapse border to prevent content shift ([b260a7c](https://github.com/dvcol/neo-svelte/commit/b260a7c53f681897af275ffa47e3aa4436620ef9))
+* **arrow:** disable line on mobile ([3cf3970](https://github.com/dvcol/neo-svelte/commit/3cf3970d586aaba5f2bcdd87426a5af3056645b9))
+* **button:** adds button context to snippets ([d6b88ee](https://github.com/dvcol/neo-svelte/commit/d6b88eed0e340f37edba435ea1d4a8ab5b6c41e9))
+* **button:** rework readonly mode (to be disabled without styling) ([e53561f](https://github.com/dvcol/neo-svelte/commit/e53561f3579d62ed7b4471e4ebef2fa8b40cc858))
+* **buttons:** adds checked state when loading ([da4a571](https://github.com/dvcol/neo-svelte/commit/da4a57177e8e50885653539220996184cee4ff57))
+* **buttons:** adds sizing to button groups ([9f1ceb1](https://github.com/dvcol/neo-svelte/commit/9f1ceb194d05cfaf135a180931cbdb8c35c56059))
+* **buttons:** set type to button to prevent form submit ([025f412](https://github.com/dvcol/neo-svelte/commit/025f4127d3e8e0e1d5f49bfec8d613bad7363070))
+* **form:** adds validate method ([582d0be](https://github.com/dvcol/neo-svelte/commit/582d0beb594fe02370538fba5d0f8bb646ea82a0))
+* **input:** adjust styling & support nullable select ([b4884c0](https://github.com/dvcol/neo-svelte/commit/b4884c0fab593f48504ebe48f7d9568988aed3e1))
+* **input:** fix auto-complete in chrome ([95e5c3d](https://github.com/dvcol/neo-svelte/commit/95e5c3d770e14009093fb49093a7ec6734c00d2c))
+* **input:** fix textarea default binding & fix stepper vertical css ([1e406e5](https://github.com/dvcol/neo-svelte/commit/1e406e57c74bd5db82d650468bdf2cf907165a76))
+* **input:** remove infinite resize hooks ([a5af533](https://github.com/dvcol/neo-svelte/commit/a5af53348be20db9b4aedb379df294390f71026e))
+* **inputs:** corrects autofill styling for webkit ([9db7aeb](https://github.com/dvcol/neo-svelte/commit/9db7aeb03af791de194245dabb55f56ec5657ff3))
+* **progress:** adds track disable & fix css ([3ab6cee](https://github.com/dvcol/neo-svelte/commit/3ab6cee677836091d21bf6656668dd0d11c43494))
+* **progress:** adjust bar sizing ([8da6764](https://github.com/dvcol/neo-svelte/commit/8da67648457b476532591f83b6de2151a18ee308))
+* **progress:** dynamically size margin to fit inner marks ([32af1fe](https://github.com/dvcol/neo-svelte/commit/32af1feb27f2c3fb5665c8d57b3ce6770dc21762))
+* **reactivity:** remove ref binding to reduce unnecessary effects ([aa2a454](https://github.com/dvcol/neo-svelte/commit/aa2a454fe15c5d7772cf2fd2e586c527aac52e3d))
+* **select:** auto-select if value set but not selected ([c431b50](https://github.com/dvcol/neo-svelte/commit/c431b50c18ecc625c61109fc2212f94098bd6c72))
+* **select:** transform items before processing ([89b77e7](https://github.com/dvcol/neo-svelte/commit/89b77e77a625029da3f5a0b4bf3684a3974e69b0))
+* **sizing:** adds sizing binding for various inputs ([afe52f1](https://github.com/dvcol/neo-svelte/commit/afe52f114e274cc3dfeedcac66ea838e5f0e2b8e))
+* **sizing:** adjust sizing options & add flex prop ([ecb37de](https://github.com/dvcol/neo-svelte/commit/ecb37deb3f1af2cd5ba5167e2a39821248c1cbad))
+* **sizing:** move progress to custom sizing props ([e0cfa36](https://github.com/dvcol/neo-svelte/commit/e0cfa367c0388042fb4fe8e1c690c33d1c0c3920))
+* **stepper:** adds debounce to loading state ([cc2a20a](https://github.com/dvcol/neo-svelte/commit/cc2a20a9273c5e96d8f25e5a9d70a66bf7496fe1))
+* **stepper:** adjust margin to align with first and last refs ([4522547](https://github.com/dvcol/neo-svelte/commit/452254779d93b496883ea64c8ff72c792f5e61a8))
+* **textarea:** adjust padding when overflow is set ([e5241b3](https://github.com/dvcol/neo-svelte/commit/e5241b3d07ae1ea0816eb45a2605bac0b6e942fa))
+* **tooltip:** adjust auto-sizing ([bee11b2](https://github.com/dvcol/neo-svelte/commit/bee11b2f0adcab9c2409849d2d15636423f48319))
+* **transition:** adds keys to transition container ([f2a82ed](https://github.com/dvcol/neo-svelte/commit/f2a82eda98269461a8e17f314c0ee6696f76cfc1))
+* **validation:** simplify input validation ([4fa7811](https://github.com/dvcol/neo-svelte/commit/4fa7811a8470a05dd517d0705e91b643096a74c4))
+* **various:** fix textarea default size, account draw animation, ... ([19dc238](https://github.com/dvcol/neo-svelte/commit/19dc238effb950dfd25d29d6a589e92181520ec4))
+
+### [0.1.10](https://github.com/dvcol/neo-svelte/compare/v0.1.9...v0.1.10) (2025-02-19)
+
 ### [0.1.9](https://github.com/dvcol/neo-svelte/compare/v0.1.8...v0.1.9) (2025-02-19)
 
 

package/README.md

@@ -18,6 +18,12 @@
   </a>
 </p>
 
+## Description
+
+Neo Svelte is a modern UI library for Svelte 5, designed to bring a sleek, soft, and futuristic look to web applications with neumorphism and glassmorphism design elements.
+
+It provides a collection of pre-styled, accessible, and highly customizable components that make it easy to build visually appealing UIs with minimal effort.
+
 ## Prerequisites
 
 Note: Svelte Simple Router is a svelte 5 native library, and will not work with prior versions of svelte.
@@ -89,12 +95,9 @@ See examples in the demo (code [here](https://github.com/dvcol/neo-svelte/tree/f
 - [x] select
   - [x] native
   - [x] custom
-- [x] tooltip
-  - [ ] popconfirm
-  - [x] popselect
-  - [ ] menu
-  - [ ] nested menus
-  - [ ] menu pane (multi column)
+- [x] form
+  - [x] validation
+  - [x] fieldset
   
 - [x] list
   - [x] select
@@ -123,14 +126,26 @@ See examples in the demo (code [here](https://github.com/dvcol/neo-svelte/tree/f
   - [x] duration/timeout
   - [x] start/stop/cancel/finish/reset
 
-- [ ] collapse
-  - [ ] summary
-  - [ ] details (html semantic tags)
+- [x] collapse
+  - [x] description
+  - [x] vertical
+  - [x] accordion
+  - [x] controlled (min, max, toggle)
 
-- [ ] stepper
-  - [ ] vertical
-  - [ ] animation (slider, fade or collapse)
-  - [ ] progress/dots
+- [x] stepper
+  - [x] vertical
+  - [ ] collapse
+  - [x] progress/dots
+  - [x] controls (cancel, next, prev, finish)
+  - [x] touch swipe
+
+- [x] tooltip
+  - [x] popconfirm
+  - [x] popselect
+  - [ ] popstepper
+  - [ ] menu
+  - [ ] nested menus
+  - [ ] menu pane (multi column)
 
 - [ ] Modal/dialog
   - [ ] HTML Dialog
@@ -185,12 +200,12 @@ See examples in the demo (code [here](https://github.com/dvcol/neo-svelte/tree/f
   - [ ] carousel
   - [ ] parallax
 - [ ] avatar
-  - [ ] badge
-- [ ] Progress/Loading
-  - [ ] bar
-  - [ ] circle
-  - [ ] border
-  - [ ] background
+  - [x] badge
+
+- [ ] PointerTracker (Pointer Events)
+  - [ ] track cursor
+  - [ ] grow to tabindex targets
+  - [ ] height, twist, tilt & pressure support
 
 - [ ] text
   - [ ] elevation

package/dist/buttons/NeoArrowButton.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+  import type { PointerEventHandler } from 'svelte/elements';
+
+  import type { NeoArrowButtonProps } from './neo-arrow-button.model.js';
+
+  import NeoButton from './NeoButton.svelte';
+  import IconArrow from '../icons/IconArrow.svelte';
+  import { IconArrowDirection } from '../icons/icon.model.js';
+
+  /* eslint-disable prefer-const -- necessary for binding checked */
+  let {
+    // State
+    hovered = $bindable(false),
+    direction = IconArrowDirection.Right,
+
+    // Button props
+    checked = $bindable(false),
+    disabled,
+    readonly,
+
+    // Events
+    onpointerenter,
+    onpointerleave,
+
+    // Other Props
+    arrowProps,
+    ...rest
+  }: NeoArrowButtonProps = $props();
+  /* eslint-enable prefer-const */
+
+  const reverse = $derived(direction === 'right');
+
+  const onPointerEnter: PointerEventHandler<HTMLButtonElement> = e => {
+    hovered = true;
+    onpointerenter?.(e);
+  };
+
+  const onPointerLeave: PointerEventHandler<HTMLButtonElement> = e => {
+    hovered = false;
+    onpointerleave?.(e);
+  };
+</script>
+
+{#snippet icon()}
+  <IconArrow {direction} expanded={(checked || hovered) && !disabled && !readonly} {...arrowProps} />
+{/snippet}
+
+<NeoButton bind:checked {icon} {reverse} {disabled} {readonly} {...rest} onpointerenter={onPointerEnter} onpointerleave={onPointerLeave} />

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

@@ -0,0 +1,4 @@
+import type { NeoArrowButtonProps } from './neo-arrow-button.model.js';
+declare const NeoArrowButton: import("svelte").Component<NeoArrowButtonProps, {}, "checked" | "hovered">;
+type NeoArrowButton = ReturnType<typeof NeoArrowButton>;
+export default NeoArrowButton;

package/dist/buttons/NeoButton.svelte

@@ -1,7 +1,9 @@
 <script lang="ts">
   import { width } from '@dvcol/svelte-utils/transition';
 
-  import { type NeoButtonProps, NeoTextButton } from './neo-button.model.js';
+  import type { KeyboardEventHandler, MouseEventHandler } from 'svelte/elements';
+
+  import { type NeoButtonContext, type NeoButtonProps, NeoTextButton } from './neo-button.model.js';
 
   import IconCircleLoading from '../icons/IconCircleLoading.svelte';
   import { toAction, toActionProps, toTransition, toTransitionProps } from '../utils/action.utils.js';
@@ -126,10 +128,11 @@
     }, 150);
   };
 
-  const onClick: NeoButtonProps['onclick'] = e => {
+  const onClick: MouseEventHandler<HTMLButtonElement> = e => {
     if (loading || disabled) return;
+    if (readonly) return onActive();
     if (toggle) {
-      if (!readonly) checked = !checked;
+      checked = !checked;
       onchecked?.(checked);
       onclick?.(e, checked);
       return;
@@ -139,15 +142,15 @@
     onActive();
   };
 
-  const onKeydownEnter: NeoButtonProps['onkeydown'] = e => {
-    if (loading || disabled) return;
+  const onKeydownEnter: KeyboardEventHandler<HTMLButtonElement> = e => {
+    if (loading || disabled || readonly) return;
     if (e.key === 'Enter') enter = true;
     onkeydown?.(e);
   };
 
-  const onKeyUpEnter: NeoButtonProps['onkeydown'] = e => {
+  const onKeyUpEnter: KeyboardEventHandler<HTMLButtonElement> = e => {
     if (e.key === 'Enter') enter = false;
-    if (loading || disabled) return;
+    if (loading || disabled || readonly) return;
     onkeyup?.(e);
   };
 
@@ -158,7 +161,27 @@
 
   const element = $derived(tag ?? (href ? 'a' : 'button'));
   const role = $derived(!['button', 'a'].includes(element) ? 'button' : undefined);
-  const tabindex = $derived(!disabled && role ? 0 : undefined);
+  const type = $derived(element === 'button' ? 'button' : undefined);
+  const tabindex = $derived.by(() => {
+    if (readonly) return -1;
+    if (!disabled && role) return 0;
+  });
+
+  const context = $derived<NeoButtonContext>({
+    ref,
+    href,
+
+    loading,
+    disabled,
+    readonly,
+    skeleton,
+
+    empty,
+    toggle,
+
+    checked,
+    pressed,
+  });
 
   const inFn = $derived(toTransition(inAction ?? transitionAction));
   const inProps = $derived(toTransitionProps(inAction ?? transitionAction));
@@ -172,10 +195,13 @@
 <svelte:element
   this={element}
   bind:this={ref}
-  href={loading || disabled ? undefined : href}
+  href={loading || disabled || readonly ? undefined : href}
+  aria-disabled={readonly && !disabled}
+  {type}
   {role}
   {tabindex}
   class:neo-button={true}
+  class:neo-readonly={readonly}
   class:neo-pulse={pulse}
   class:neo-coalesce={coalesce}
   class:neo-pressed={pressed}
@@ -223,17 +249,17 @@
         {#if loading}
           <IconCircleLoading />
         {:else}
-          {@render icon?.()}
+          {@render icon?.(context)}
         {/if}
       </span>
     {/if}
     {#if !empty}
       {#if typeof label === 'function'}
-        {@render label?.()}
+        {@render label?.(context)}
       {:else if label !== undefined}
         {label}
       {/if}
-      {@render children?.()}
+      {@render children?.(context)}
     {/if}
   </div>
 </svelte:element>
@@ -269,7 +295,7 @@
   border-radius: var(--neo-btn-border-radius, var(--neo-border-radius));
   box-shadow: var(--neo-btn-box-shadow, var(--neo-box-shadow-raised-3));
   cursor: pointer;
-  transition: opacity 0.3s ease, color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, backdrop-filter 0.3s ease, border-radius 0.3s ease, box-shadow 0.3s ease-out;
+  transition: opacity 0.3s ease, color 0.15s ease, background-color 0.3s ease, border-color 0.3s ease, backdrop-filter 0.3s ease, border-radius 0.3s ease, box-shadow 0.3s ease-out;
   appearance: none;
 }
 .neo-button.neo-loading {
@@ -286,20 +312,20 @@
   width: 100%;
   height: 100%;
   backface-visibility: hidden;
-  transition: color 0.3s ease, scale 0.3s ease;
+  transition: color 0.15s ease, scale 0.3s ease;
   will-change: scale, color;
   scale: 1;
 }
 .neo-button .neo-content .neo-icon:not(.neo-only) {
-  margin-right: var(--neo-btn-icon-gap, 0.35rem);
-  margin-left: var(--neo-btn-icon-offset, calc(0.25rem - var(--neo-btn-icon-gap, 0.5rem)));
+  margin-right: var(--neo-btn-icon-gap, 0.3125rem);
+  margin-left: var(--neo-btn-icon-offset, calc(0% - var(--neo-btn-icon-gap, 0.3125rem)));
 }
 .neo-button .neo-content.neo-reverse {
   flex-direction: row-reverse;
 }
 .neo-button .neo-content.neo-reverse .neo-icon:not(.neo-only) {
-  margin-right: var(--neo-btn-icon-offset, calc(0.25rem - var(--neo-btn-icon-gap, 0.5rem)));
-  margin-left: var(--neo-btn-icon-gap, 0.35rem);
+  margin-right: var(--neo-btn-icon-offset, calc(0% - var(--neo-btn-icon-gap, 0.3125rem)));
+  margin-left: var(--neo-btn-icon-gap, 0.3125rem);
 }
 .neo-button.neo-ghost {
   justify-content: unset;
@@ -326,7 +352,7 @@
 }
 .neo-button.neo-pressed, .neo-button:active:not(.neo-loading, :disabled) {
   box-shadow: var(--neo-btn-box-shadow-active, var(--neo-box-shadow-pressed-2));
-  transition: opacity 0.3s ease, color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, backdrop-filter 0.3s ease, border-radius 0.3s ease, box-shadow 0.15s ease-out;
+  transition: opacity 0.3s ease, color 0.15s ease, background-color 0.3s ease, border-color 0.3s ease, backdrop-filter 0.3s ease, border-radius 0.3s ease, box-shadow 0.15s ease-out;
 }
 .neo-button.neo-pressed.neo-scale .neo-content, .neo-button:active:not(.neo-loading, :disabled).neo-scale .neo-content {
   color: var(--neo-btn-text-color-active, var(--neo-text-color-active));
@@ -381,9 +407,8 @@
 }
 .neo-button:disabled, .neo-button[disabled]:not([disabled=false]) {
   cursor: not-allowed;
-  opacity: var(--neo-btn-opacity-disabled, var(--neo-opacity-disabled));
 }
-.neo-button:disabled:not(.neo-pressed), .neo-button[disabled]:not([disabled=false]):not(.neo-pressed) {
+.neo-button:disabled:not(.neo-pressed, .neo-readonly), .neo-button[disabled]:not([disabled=false]):not(.neo-pressed, .neo-readonly) {
   border-color: var(--neo-btn-border-color-disabled, var(--neo-border-color-disabled));
   box-shadow: var(--neo-box-shadow-flat);
 }

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

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

package/dist/buttons/NeoButtonGroup.svelte

@@ -13,6 +13,7 @@
     isShadowFlat,
     parseBlur,
   } from '../utils/shadow.utils.js';
+  import { toSize } from '../utils/style.utils.js';
 
   /* eslint-disable prefer-const -- necessary for binding checked */
   let {
@@ -49,6 +50,10 @@
     align,
     flex,
 
+    // Size
+    width: _width,
+    height: _height,
+
     // Transition
     in: inAction,
     out: outAction,
@@ -107,6 +112,9 @@
     vertical,
     start,
   });
+
+  const width = $derived(toSize(_width));
+  const height = $derived(toSize(_height));
 </script>
 
 <svelte:element
@@ -139,6 +147,12 @@
   style:justify-content={justify}
   style:align-items={align}
   style:flex
+  style:width={width?.absolute}
+  style:min-width={width?.min}
+  style:max-width={width?.max}
+  style:height={height?.absolute}
+  style:min-height={height?.min}
+  style:max-height={height?.max}
   use:useFn={useProps}
   out:outFn={outProps}
   in:inFn={inProps}
@@ -177,7 +191,7 @@
   border: var(--neo-border-width, 1px) var(--neo-btn-group-border-color, transparent) solid;
   border-radius: calc(var(--neo-btn-group-border-radius, var(--neo-border-radius)) + 0.25rem);
   box-shadow: var(--neo-btn-group-box-shadow, var(--neo-box-shadow-flat));
-  transition: color 0.3s ease, border-color 0.3s linear, background-color 0.3s ease, border-radius 0.3s ease, box-shadow 0.3s ease-out;
+  transition: color 0.15s ease, border-color 0.3s linear, background-color 0.3s ease, border-radius 0.3s ease, box-shadow 0.3s ease-out;
 }
 .neo-button-group.neo-nowrap {
   flex-wrap: nowrap;
@@ -344,6 +358,7 @@
 }
 .neo-button-group.neo-vertical {
   flex-direction: column;
+  min-width: max-content;
   --neo-btn-group-scale-x: 1.75;
   --neo-btn-group-scale-y: 1.5;
 }

package/dist/buttons/NeoCheckboxButton.svelte

@@ -47,6 +47,7 @@
 </script>
 
 <button
+  type="button"
   class="neo-checkbox-button"
   role="checkbox"
   aria-checked={indeterminate ? 'mixed' : checked}

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" | "indeterminate" | "touched">;
+declare const NeoCheckboxButton: import("svelte").Component<NeoCheckboxButtonProps, {}, "checked" | "touched" | "indeterminate">;
 type NeoCheckboxButton = ReturnType<typeof NeoCheckboxButton>;
 export default NeoCheckboxButton;

package/dist/buttons/NeoRadioButton.svelte

@@ -45,6 +45,7 @@
 </script>
 
 <button
+  type="button"
   role="radio"
   aria-checked={checked}
   class:neo-radio-button={true}

package/dist/buttons/NeoSwitchButton.svelte

@@ -68,6 +68,7 @@
 {/snippet}
 
 <button
+  type="button"
   role="switch"
   aria-checked={indeterminate ? 'mixed' : checked}
   class:neo-switch-button={true}

package/dist/buttons/index.d.ts

@@ -3,8 +3,10 @@ export { default as NeoButtonGroup } from './NeoButtonGroup.svelte';
 export { default as NeoCheckboxButton } from './NeoCheckboxButton.svelte';
 export { default as NeoRadioButton } from './NeoRadioButton.svelte';
 export { default as NeoSwitchButton } from './NeoSwitchButton.svelte';
+export { default as NeoArrowButton } from './NeoArrowButton.svelte';
 export type * from './neo-button.model.js';
 export type * from './neo-button-group.model.js';
 export type * from './neo-checkbox-button.model.js';
 export type * from './neo-radio-button.model.js';
 export type * from './neo-switch-button.model.js';
+export type * from './neo-arrow-button.model.js';

package/dist/buttons/index.js

@@ -3,3 +3,4 @@ export { default as NeoButtonGroup } from './NeoButtonGroup.svelte';
 export { default as NeoCheckboxButton } from './NeoCheckboxButton.svelte';
 export { default as NeoRadioButton } from './NeoRadioButton.svelte';
 export { default as NeoSwitchButton } from './NeoSwitchButton.svelte';
+export { default as NeoArrowButton } from './NeoArrowButton.svelte';

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

@@ -0,0 +1,16 @@
+import type { NeoButtonProps } from './neo-button.model.js';
+import type { IconArrowProps } from '../icons/icon.model.js';
+export type NeoArrowButtonProps = NeoButtonProps & {
+    /**
+     * The hover state of the button (controls the arrow expand animation).
+     */
+    hovered?: boolean;
+    /**
+     * Optional arrow properties.
+     */
+    arrowProps?: IconArrowProps;
+    /**
+     * Arrow direction.
+     */
+    direction?: IconArrowProps['direction'];
+};

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

@@ -0,0 +1 @@
+export {};

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

@@ -4,6 +4,7 @@ import type { HTMLActionProps } from '../utils/action.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';
+import type { SizeInput } from '../utils/style.utils.js';
 export type NeoButtonGroupElevation = ShadowElevation | ShadowElevationString;
 export type NeoButtonGroupContext = {
     /**
@@ -45,7 +46,7 @@ export type NeoButtonGroupContext = {
          */
         active?: NeoButtonActiveElevation;
         /**
-         * Weather the pressed state should be displayed as recessed or pressed.
+         * Whether the pressed state should be displayed as recessed or pressed.
          *
          * @default true if `elevation` + `hover` > 0 && `active` < 0
          */
@@ -113,4 +114,12 @@ export type NeoButtonGroupProps<Tag extends keyof HTMLElementTagNameMap = 'div'>
      * If true, the buttons will not wrap to the next line.
      */
     nowrap?: boolean;
+    /**
+     * Optional width constraints.
+     */
+    width?: SizeInput<'width'>;
+    /**
+     * Optional height constraints.
+     */
+    height?: SizeInput<'height'>;
 } & NeoButtonGroupContext & HTMLFlexProps & HTMLNeoBaseElement<HTMLElementTagNameMap[Tag]> & HTMLActionProps & HTMLRefProps;