@dvcol/neo-svelte 1.1.1 → 1.2.0

package/CHANGELOG.md

@@ -2,6 +2,103 @@
 
 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.
 
+## [1.2.0](https://github.com/dvcol/neo-svelte/compare/v1.1.2...v1.2.0) (2026-03-21)
+
+
+### Features
+
+* **border:** widen border-radius range ([fa5f824](https://github.com/dvcol/neo-svelte/commit/fa5f824dbb4647023d228ad7ad0d8afce00ba9a2))
+* **buttons:** adds image icon support to buttons & pills ([3e02aca](https://github.com/dvcol/neo-svelte/commit/3e02aca68fc74cd0daa877496f6f71f8054e193f))
+* **buttons:** alter background when hovering/activating buttons ([1e82f4c](https://github.com/dvcol/neo-svelte/commit/1e82f4c0f7ae75b2eb1b0b9a6f949ffc1a010f32))
+* **icon:** fix unplug & rework props ([b42a890](https://github.com/dvcol/neo-svelte/commit/b42a89021766f52421aed4664ce6be78658d6b4b))
+* **icon:** make watch enter toggle ([820b795](https://github.com/dvcol/neo-svelte/commit/820b795fe2e81f5dabb3a1801a922c9c78dd0b5a))
+* **icon:** rework selector & export some icons ([d58de75](https://github.com/dvcol/neo-svelte/commit/d58de75733a2406ee08d8afc28b4e09dab41ae4e))
+* **image:** support error & fallback ([83a8f5d](https://github.com/dvcol/neo-svelte/commit/83a8f5d0ca0ce53f36316adcdd3c575aeefa328d))
+* **list:** add transition to virtual list ([684b1a5](https://github.com/dvcol/neo-svelte/commit/684b1a52895e503c55fdcd358604321bdf0c6f16))
+* **list:** adds media to base loader ([8807c1e](https://github.com/dvcol/neo-svelte/commit/8807c1e1084c966f51960b1ed3af3fd3f83fdc77))
+* **list:** adds scrolltop/scrollbottom event listener ([dbfce7f](https://github.com/dvcol/neo-svelte/commit/dbfce7f881c0e2684d5f5bf0c2108ceab33ec0b6))
+* **list:** adds tags support to list item ([78772c1](https://github.com/dvcol/neo-svelte/commit/78772c183b5da05f75cf645e68a45b9da0d38184))
+* **list:** adds virtual list component ([0484ddc](https://github.com/dvcol/neo-svelte/commit/0484ddc563a71914ed5e05a0aaf108db8ab0a63b))
+* **list:** introduce simpler flat list before virtual list ([6a5c63d](https://github.com/dvcol/neo-svelte/commit/6a5c63d3f47762c129937a71dd68d61c24bdaa10))
+* **list:** move style to virtual list ([44fde70](https://github.com/dvcol/neo-svelte/commit/44fde70a0ef053a19312b2f74a9fb0a8870584f2))
+* **list:** support reversing flow in list & menu ([1df5367](https://github.com/dvcol/neo-svelte/commit/1df5367a58983981c6203132a86d924d0e4d89e5))
+* **media:** adds basic image support ([d2cb84a](https://github.com/dvcol/neo-svelte/commit/d2cb84a2bb797c013e44592d56b4df8180bd760b))
+* **media:** adds media wrapper & image support ([b3c8d4d](https://github.com/dvcol/neo-svelte/commit/b3c8d4d572887bcdd5dd5afefe693d528ae3ac59))
+* **media:** move skeleton loading to NeoImage ([fd15ba4](https://github.com/dvcol/neo-svelte/commit/fd15ba45ac55e351c7a2eb9c89997be4d19df8d4))
+* **notification:** adds basic notification stack plumbing ([542cede](https://github.com/dvcol/neo-svelte/commit/542cede52d044c008158fd1103806158546377c6))
+* **notification:** adds drag to dismiss ([3616a44](https://github.com/dvcol/neo-svelte/commit/3616a445f587748e18eb932d9aff39f481b57691))
+* **notification:** adds notification content ([82a99f1](https://github.com/dvcol/neo-svelte/commit/82a99f1a2e7a1f274fcb15f383b25d9d2ba4bedc))
+* **notification:** basic styling & swipe to dismiss ([a4c6259](https://github.com/dvcol/neo-svelte/commit/a4c6259a51b58cfe68fc15729e1a7628bd35094b))
+* **notification:** split notification item & stack ([ec97213](https://github.com/dvcol/neo-svelte/commit/ec97213995d4d726f16bf1145c8cddbdc8e94a5a))
+* **pill:** adds icon to pills ([4dd9dd8](https://github.com/dvcol/neo-svelte/commit/4dd9dd89da587df442fbaf0a42151abc8dad9f5d))
+* **progress:** adds delay support ([236b1e8](https://github.com/dvcol/neo-svelte/commit/236b1e8bf6fc3de14447049038ec4c8fcb014cc2))
+* **progress:** adds queuing service to progress ([a5fadd9](https://github.com/dvcol/neo-svelte/commit/a5fadd92fc72ca352496d6ee668e5f885314adc5))
+* **progress:** adds service hook & context ([5ed620a](https://github.com/dvcol/neo-svelte/commit/5ed620ab2fba7c3b0d2b7fb4507784d090bb9c6a))
+* **progress:** enter & exit from indeterminate gracefully ([871b526](https://github.com/dvcol/neo-svelte/commit/871b526780f5313c90d0e247b98b24ffc6ccda06))
+* **rounded:** support custom rounded value ([efe1282](https://github.com/dvcol/neo-svelte/commit/efe1282f74186e58361dcd413de02f0b26ec7e21))
+* **row:** adds tabs & button row ([45f69e1](https://github.com/dvcol/neo-svelte/commit/45f69e1dfca5d4f5df4bc880a84bf407c4c4c9ab))
+* **tabs:** forward focus & pointer events in tabs ([98e0791](https://github.com/dvcol/neo-svelte/commit/98e07915359040db5c1d014aa50f1aa52fa85e6e))
+* **text:** adds html support to NeoMark ([44ad0ba](https://github.com/dvcol/neo-svelte/commit/44ad0ba9d9ba2057c31b5eba9d96439a6ae08564))
+* **theme:** adds spin transition option ([1aa9fd3](https://github.com/dvcol/neo-svelte/commit/1aa9fd3020955bdffdd71eb84cc88667bf60ce2d))
+* **transition:** adds transition selector ([796f6b3](https://github.com/dvcol/neo-svelte/commit/796f6b3277760790a0f872c731f29f641a05dc46))
+
+
+### Bug Fixes
+
+* **border:** adjust border radius for menu & tooltips ([182cb77](https://github.com/dvcol/neo-svelte/commit/182cb777cdf9e79bebb91043047085459f6e16f1))
+* **buttons:** adjust group specificity ([b3805e6](https://github.com/dvcol/neo-svelte/commit/b3805e6017777124a8741f350002e386e610b41e))
+* **components:** export bound methods to component instance ([ee02250](https://github.com/dvcol/neo-svelte/commit/ee0225098fb998def7c3e0def7c5868b62b226aa))
+* **css:** rename variables ([8a96aa3](https://github.com/dvcol/neo-svelte/commit/8a96aa30bf8dd3a3f7f6cbe7bec4f919e3b281a6))
+* **dialog:** css sizing issue in safari ([a24d40d](https://github.com/dvcol/neo-svelte/commit/a24d40dbca48d6edf26966d854b1a5d571f7982a))
+* **dialog:** fix drawer ([12dce43](https://github.com/dvcol/neo-svelte/commit/12dce43862a26ffec0daa3a8de1273ba0a0bf545))
+* **floating:** export notifications ([1376474](https://github.com/dvcol/neo-svelte/commit/1376474884e3ffd473624b8b9d6b730a339716fb))
+* **icon:** make empty stroke color dynamic ([e20f69a](https://github.com/dvcol/neo-svelte/commit/e20f69a3028d2a6a42fab006a7a43aa4172d7221))
+* **input:** adds native select overflow auto ([f1d154a](https://github.com/dvcol/neo-svelte/commit/f1d154a46bb659dfe9de5d393921228eb502d1d2))
+* **input:** fix multiple select value reflect ([55b3af4](https://github.com/dvcol/neo-svelte/commit/55b3af42931c58df2aba57a23a68635818a4c1eb))
+* **input:** make select pointer cursor ([3d91970](https://github.com/dvcol/neo-svelte/commit/3d9197019df03e8b3393a2b54446c9971757be90))
+* **inputs:** reflect value change in selects & fix buttons ([b56518f](https://github.com/dvcol/neo-svelte/commit/b56518f1c2e5cad9f97d314dfdf31bd3d2edfd78))
+* **lazy:** relax component props ([5591986](https://github.com/dvcol/neo-svelte/commit/5591986417c3f6c7d87674fed59fe241e6aaaf4e))
+* **list:** adds loading to virtual list ([c47cd1b](https://github.com/dvcol/neo-svelte/commit/c47cd1bce77282f6913991f41a0a4f0f6d2b966b))
+* **list:** adjust spacing in list elements ([b0334a6](https://github.com/dvcol/neo-svelte/commit/b0334a694441ef31e72b25583e6ff197428aec41))
+* **list:** broaden tab select targets ([a744101](https://github.com/dvcol/neo-svelte/commit/a744101c73ce30c852bcd52760a3128c6a97110e))
+* **list:** correct typings ([2a1a48d](https://github.com/dvcol/neo-svelte/commit/2a1a48d7aa6a24b206e6f5b217e5099edadc1fed))
+* **list:** correctly render dividers ([2f10550](https://github.com/dvcol/neo-svelte/commit/2f10550f1a6b230c8bd03de8ee2b554375c34781))
+* **list:** expose virtual props ([bef22ff](https://github.com/dvcol/neo-svelte/commit/bef22ffe05bd9ed1bfaa791f444f815617e9a848))
+* **list:** fix divider support in flip mode ([dfa5241](https://github.com/dvcol/neo-svelte/commit/dfa524194af6f118971fe63aeff6fc373c2400d7))
+* **list:** fix flip behaviour and arrow/tab nav ([bdc5b31](https://github.com/dvcol/neo-svelte/commit/bdc5b315a8daf30fb822f4ac216fd5e35a3e6416))
+* **list:** fix scroll detection, add tolerance & widen search styles ([490af21](https://github.com/dvcol/neo-svelte/commit/490af217aeeab39b2683e75a12f71fd938fed1bd))
+* **list:** fix skeleton & section label ([3c60652](https://github.com/dvcol/neo-svelte/commit/3c6065208827769dd7bbe4cf02ae7163abb1708b))
+* **list:** improve virtual list performance ([064ce40](https://github.com/dvcol/neo-svelte/commit/064ce40ca139daf8d987638dad9a82f14fbe34bd))
+* **list:** remove flip logic from virtual ([c5ee022](https://github.com/dvcol/neo-svelte/commit/c5ee022912115bec2b2e2715bae11176eca57ef0))
+* **list:** remove skeleton from list ([266d59f](https://github.com/dvcol/neo-svelte/commit/266d59f1b07a53400b52affb911531bd87ceedd5))
+* **list:** reverse flow of tags ([82a2ae9](https://github.com/dvcol/neo-svelte/commit/82a2ae987cdd57d2c6dea25abae876e5d8fec728))
+* **media:** adjust border-radius ([76a994f](https://github.com/dvcol/neo-svelte/commit/76a994f9c8457472dfee402e7b2b54c8b3ddce25))
+* **media:** fix alt text visibility ([a18fe15](https://github.com/dvcol/neo-svelte/commit/a18fe15b66b8373f4051c3d6b53d1a60c7083d2d))
+* **media:** fix sizing of alt text while loading ([d1c3d03](https://github.com/dvcol/neo-svelte/commit/d1c3d038c2c78652b5d8cec92c59ce5e7f883393))
+* **menu:** fallback to value if section has no label ([b94498d](https://github.com/dvcol/neo-svelte/commit/b94498d4d216a38e674d6862d3877cb8ac5c3445))
+* **menu:** increase rounded menu spacing ([f8a1952](https://github.com/dvcol/neo-svelte/commit/f8a1952b70508daecd586324fe2501381330cdcd))
+* **notification:** adds collapsed view ([80ae3f4](https://github.com/dvcol/neo-svelte/commit/80ae3f4032a34efada5286dc1f1c4e17536ec9e3))
+* **notification:** adjust rounded style & fix drag/swipe ([e7649c9](https://github.com/dvcol/neo-svelte/commit/e7649c9c2234a56d67234b4c01d9f30f52236d5f))
+* **notification:** debounce swipe in stacks ([c3c88ef](https://github.com/dvcol/neo-svelte/commit/c3c88ef3eb9ae1afff9bd432beac53d88bea8dc9))
+* **notification:** fix height on safari ([9e18807](https://github.com/dvcol/neo-svelte/commit/9e1880741e04449445ffcbe3f3128d511a46f634))
+* **notification:** increase stagger & fix touch drag ([e914e54](https://github.com/dvcol/neo-svelte/commit/e914e54e1276c259ef694120bb95a0a812fc3573))
+* **notification:** switch to grid ([842e6b5](https://github.com/dvcol/neo-svelte/commit/842e6b53c3bc7e9c0df03ae45040d0a374f7e9c2))
+* **notification:** update delay ([c057316](https://github.com/dvcol/neo-svelte/commit/c0573167d610efbb29d6fa6d58f5e63dd2efaaad))
+* **portal:** svelte doesn't support mounting snippets anymore ([6b52970](https://github.com/dvcol/neo-svelte/commit/6b5297077b466c087a640eae8678089e8220f695))
+* **progress:** rework controlleds methods ([101a405](https://github.com/dvcol/neo-svelte/commit/101a4057fed6c54f6d7b815bec98f59223deb6e8))
+* **row:** rework tab registration ([fce041e](https://github.com/dvcol/neo-svelte/commit/fce041e23244216b29b54c0e4f31cedb258ddc3d))
+* **row:** show active tab in menu ([daf9142](https://github.com/dvcol/neo-svelte/commit/daf9142a7d2f670956d29ccea7dcc3409667357f))
+* **style:** adjust glass border colours & bump svelte ([7602f07](https://github.com/dvcol/neo-svelte/commit/7602f0796661d1768941bea3a1886d26bbfb7921))
+* **tooltip:** fix floating state access & reflect final position ([e12762c](https://github.com/dvcol/neo-svelte/commit/e12762c774558f783a1898e1ed12c369f69d9ee1))
+* **touch:** disable touch action on draggable elements ([ac01b68](https://github.com/dvcol/neo-svelte/commit/ac01b68005c55db11fa2146ccbfc785aaf591075))
+
+### [1.1.2](https://github.com/dvcol/neo-svelte/compare/v1.1.1...v1.1.2) (2025-04-21)
+
+
+### Bug Fixes
+
+* **nav:** fix snippet when exported ([bda737c](https://github.com/dvcol/neo-svelte/commit/bda737c4fc9fd206e28253fee559fd02a9528642))
+
 ### [1.1.1](https://github.com/dvcol/neo-svelte/compare/v1.1.0...v1.1.1) (2025-04-21)
 
 

package/README.md

@@ -112,9 +112,8 @@ See examples in the demo (code [here](https://github.com/dvcol/neo-svelte/tree/f
     - [x] sections
     - [x] keyboard navigation
   - [x] scroll shadow
-  - [ ] virtualized
-  - [ ] infinite scroll
-  - [ ] drag & drop
+  - [x] virtualized
+  - [x] infinite scroll
   - [ ] pagination
   - [ ] drag & drop
   - [ ] timeline
@@ -156,7 +155,7 @@ See examples in the demo (code [here](https://github.com/dvcol/neo-svelte/tree/f
   - [x] popselect
   - [x] popstepper
 
-- [ ] Modal/dialog
+- [x] Modal/dialog
 
   - [x] HTML Dialog
     - [x] animation (slide/fade)
@@ -173,6 +172,15 @@ See examples in the demo (code [here](https://github.com/dvcol/neo-svelte/tree/f
     - [x] close button
     - [ ] persistant
 
+- [ ] Command Palette
+
+  - [ ] list
+  - [ ] header
+  - [ ] footer
+  - [ ] panel
+  - [ ] shortcuts
+  - [ ] expanded buttons
+
 - [x] menu
 
   - [x] nested menus
@@ -247,9 +255,9 @@ See examples in the demo (code [here](https://github.com/dvcol/neo-svelte/tree/f
     - [x] fake typos
     - [x] random pauses
 
-- [ ] Alerts
-  - [ ] toast
-  - [ ] rich notification
+- [x] Alerts
+  - [x] toast
+  - [x] rich notification
 - [ ] container
   - [x] transition
   - [ ] split/resizable

package/dist/badge/neo-badge.model.d.ts

@@ -27,7 +27,7 @@ export type NeoBadgeProps = {
     /**
      * The value to display in the badge.
      */
-    value?: Snippet<[NeoBadgeContext]>;
+    value?: string | Snippet<[NeoBadgeContext]>;
     /**
      * Optional vertical and horizontal offset for the badge.
      */

package/dist/buttons/NeoArrowButton.svelte

@@ -2,12 +2,12 @@
   import type { NeoArrowButtonProps } from './neo-arrow-button.model.js';
 
   import NeoButton from './NeoButton.svelte';
-  import { IconArrowDirection } from '../icons/icon.model.js';
-  import IconArrow from '../icons/IconArrow.svelte';
+  import { NeoIconArrowDirection } from '../icons/neo-icon.model.js';
+  import NeoIconArrow from '../icons/NeoIconArrow.svelte';
 
   let {
     // State
-    direction = IconArrowDirection.Right,
+    direction = NeoIconArrowDirection.Right,
 
     // Button props
     ref = $bindable(),
@@ -26,7 +26,7 @@
 </script>
 
 {#snippet icon()}
-  <IconArrow {direction} expanded={(checked || hovered || focused) && !disabled && !readonly} {...arrowProps} />
+  <NeoIconArrow {direction} expanded={(checked || hovered || focused) && !disabled && !readonly} {...arrowProps} />
 {/snippet}
 
 <NeoButton bind:ref bind:checked bind:hovered bind:focused {icon} {reverse} {disabled} {readonly} {...rest} />

package/dist/buttons/NeoButton.svelte

@@ -7,8 +7,10 @@
   import { width } from '@dvcol/svelte-utils/transition';
 
   import { NeoTextButton } from './neo-button.model.js';
-  import IconCircleLoading from '../icons/IconCircleLoading.svelte';
+  import NeoIconCircleLoading from '../icons/NeoIconCircleLoading.svelte';
+  import NeoImage from '../media/NeoImage.svelte';
   import { toAction, toActionProps, toTransition, toTransitionProps } from '../utils/action.utils.js';
+  import { computeBorderRadius } from '../utils/border.utils.js';
   import { getColorVariable } from '../utils/colors.utils.js';
   import {
     coerce,
@@ -37,12 +39,12 @@
     loading,
     skeleton = false,
     disabled,
-    empty: only,
     toggle,
     readonly,
     checked = $bindable(false),
     hovered = $bindable(false),
     focused = $bindable(false),
+    propagation = true,
 
     // Styles
     start,
@@ -82,6 +84,7 @@
     use,
 
     // Other props
+    imageProps,
     ..._rest
   }: NeoButtonProps = $props();
 
@@ -120,7 +123,7 @@
   let enter = $state(false);
   let clicked = $state(false);
   const pressed = $derived(enter || clicked || checked);
-  const empty = $derived(only || (!children && label === undefined));
+  const empty = $derived((!children && (label === undefined || label === null)));
   const scalePressed = $derived(typeof scale === 'boolean' ? undefined : scale);
 
   let timeout: ReturnType<typeof setTimeout>;
@@ -133,6 +136,7 @@
   };
 
   const onClick: MouseEventHandler<HTMLButtonElement> = (e) => {
+    if (!propagation) e.stopPropagation();
     if (loading || disabled) return;
     if (readonly) return onActive();
     if (toggle) {
@@ -147,12 +151,14 @@
   };
 
   const onKeydownEnter: KeyboardEventHandler<HTMLButtonElement> = (e) => {
+    if (!propagation) e.stopPropagation();
     if (loading || disabled || readonly) return;
     if (e.key === 'Enter') enter = true;
     onkeydown?.(e);
   };
 
   const onKeyUpEnter: KeyboardEventHandler<HTMLButtonElement> = (e) => {
+    if (!propagation) e.stopPropagation();
     if (e.key === 'Enter') enter = false;
     if (loading || disabled || readonly) return;
     onkeyup?.(e);
@@ -188,7 +194,6 @@
     hovered,
     focused,
 
-    empty,
     toggle,
 
     checked,
@@ -236,12 +241,14 @@
   class:neo-inset-hover={hoverElevation < 0}
   class:neo-rounded={rounded}
   class:neo-empty={empty}
+  class:neo-propagation={!propagation}
   style:--neo-btn-text-color={getColorVariable(color)}
   style:--neo-btn-backdrop-filter={filter}
   style:--neo-btn-box-shadow={boxShadow}
   style:--neo-btn-box-shadow-hover={hoverShadow}
   style:--neo-btn-box-shadow-active={activeShadow}
   style:--neo-btn-scale-pressed={scalePressed}
+  style:--neo-btn-border-radius={computeBorderRadius(rounded)}
   style:justify-content={justify}
   style:align-items={align}
   style:flex
@@ -269,9 +276,11 @@
     {#if loading || icon}
       <span class="neo-icon" class:neo-only={empty} transition:width={quickDurationProps}>
         {#if loading}
-          <IconCircleLoading />
-        {:else}
+          <NeoIconCircleLoading />
+        {:else if typeof icon === 'function'}
           {@render icon?.(context)}
+        {:else if typeof icon === 'string'}
+          <NeoImage src={icon} ratio="1/1" {...imageProps} />
         {/if}
       </span>
     {/if}
@@ -305,7 +314,7 @@
   justify-content: center;
   box-sizing: border-box;
   min-width: var(--neo-btn-min-width);
-  min-height: var(--neo-btn-min-height, var(--neo-line-height));
+  min-height: var(--neo-btn-min-height);
   margin: var(--neo-btn-margin, var(--neo-shadow-margin, 0.625rem));
   padding: var(--neo-btn-padding, 0.25rem 0.75rem);
   color: var(--neo-btn-text-color, inherit);
@@ -317,8 +326,9 @@
   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.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;
+  transition: opacity 0.3s ease, color 0.15s ease, background-color 0.15s ease, border-color 0.3s ease, backdrop-filter 0.3s ease, border-radius 0.3s ease, box-shadow 0.3s ease-out;
   appearance: none;
+  will-change: background-color, box-shadow;
 }
 .neo-button.neo-loading {
   cursor: wait;
@@ -330,6 +340,10 @@
   justify-content: center;
   vertical-align: middle;
 }
+.neo-button .neo-icon :global(.neo-image) {
+  --neo-image-border-radius: 0;
+  min-height: 1rem;
+}
 .neo-button .neo-content {
   width: 100%;
   height: 100%;
@@ -339,15 +353,15 @@
   scale: 1;
 }
 .neo-button .neo-content .neo-icon:not(.neo-only) {
-  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)));
+  margin-right: var(--neo-btn-icon-gap, var(--neo-gap-3xs, 0.3125rem));
+  margin-left: var(--neo-btn-icon-offset, calc(0% - var(--neo-btn-icon-gap, var(--neo-gap-3xs, 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% - var(--neo-btn-icon-gap, 0.3125rem)));
-  margin-left: var(--neo-btn-icon-gap, 0.3125rem);
+  margin-right: var(--neo-btn-icon-offset, calc(0% - var(--neo-btn-icon-gap, var(--neo-gap-3xs, 0.3125rem))));
+  margin-left: var(--neo-btn-icon-gap, var(--neo-gap-3xs, 0.3125rem));
 }
 .neo-button:focus-visible {
   outline: var(--neo-border-width, 1px) solid var(--neo-border-color-focused);
@@ -359,33 +373,79 @@
 .neo-button:focus-visible .neo-content, .neo-button:hover .neo-content {
   color: var(--neo-btn-text-color-hover, var(--neo-text-color-hover));
 }
-.neo-button.neo-pressed, .neo-button:active:not(.neo-loading, :disabled, [disabled=true]) {
+.neo-button.neo-pressed, .neo-button:active:not(.neo-loading,
+:disabled,
+[disabled=true],
+:has(:global(:where(.neo-button.neo-propagation:active)))) {
   box-shadow: var(--neo-btn-box-shadow-active, var(--neo-box-shadow-pressed-2));
-  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;
+  transition: opacity 0.3s ease, color 0.15s ease, background-color 0.15s 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, [disabled=true]).neo-scale .neo-content {
+.neo-button.neo-pressed.neo-scale .neo-content, .neo-button:active:not(.neo-loading,
+:disabled,
+[disabled=true],
+:has(:global(:where(.neo-button.neo-propagation:active)))).neo-scale .neo-content {
   color: var(--neo-btn-text-color-active, var(--neo-text-color-active));
   scale: var(--neo-btn-scale-pressed, 0.98);
 }
-.neo-button:is(a):visited:not(:disabled, .neo-pressed, [disabled=true], :active:not(.neo-loading, :disabled, [disabled=true])) .neo-content {
+.neo-button.neo-inset-hover:focus-visible, .neo-button.neo-inset-hover:hover, .neo-button.neo-inset-hover.neo-pressed, .neo-button.neo-inset-hover:active:not(.neo-loading,
+:disabled,
+[disabled=true],
+:has(:global(:where(.neo-button.neo-propagation:active)))), .neo-button.neo-inset:focus-visible, .neo-button.neo-inset:hover, .neo-button.neo-inset.neo-pressed, .neo-button.neo-inset:active:not(.neo-loading,
+:disabled,
+[disabled=true],
+:has(:global(:where(.neo-button.neo-propagation:active)))) {
+  background-color: var(--neo-btn-bg-color-hover, var(--neo-background-color-hover));
+}
+.neo-button:is(a):visited:not(:disabled,
+.neo-pressed,
+[disabled=true],
+:active:not(.neo-loading,
+:disabled,
+[disabled=true],
+:has(:global(:where(.neo-button.neo-propagation:active))))) .neo-content {
   color: var(--neo-btn-text-color-visited, var(--neo-text-color-secondary));
 }
 .neo-button.neo-borderless {
   border-color: transparent !important;
 }
-.neo-button.neo-hover.neo-flat-hover.neo-hovered, .neo-button.neo-hover.neo-flat-hover:focus-visible:not(:active, .neo-pressed), .neo-button.neo-hover.neo-flat-hover:hover:not(:active, .neo-pressed), .neo-button.neo-flat-active.neo-pressed, .neo-button.neo-flat-active:active, .neo-button.neo-flat:not(.neo-borderless, .neo-hover-flat:hover, .neo-hover-flat:focus-visible, .neo-hover-flat.neo-hovered, .neo-pressed, :active) {
+.neo-button.neo-hover.neo-flat-hover.neo-hovered, .neo-button.neo-hover.neo-flat-hover:focus-visible:not(:active, .neo-pressed), .neo-button.neo-hover.neo-flat-hover:hover:not(:active, .neo-pressed), .neo-button.neo-flat-active.neo-pressed, .neo-button.neo-flat-active:active, .neo-button.neo-flat:not(.neo-borderless,
+.neo-hover-flat:hover,
+.neo-hover-flat:focus-visible,
+.neo-hover-flat.neo-hovered,
+.neo-pressed,
+:active) {
   border-color: var(--neo-btn-border-color, var(--neo-border-color));
 }
-.neo-button.neo-hover.neo-flat-hover.neo-hovered:focus-visible, .neo-button.neo-hover.neo-flat-hover.neo-hovered:hover, .neo-button.neo-hover.neo-flat-hover:focus-visible:not(:active, .neo-pressed):focus-visible, .neo-button.neo-hover.neo-flat-hover:focus-visible:not(:active, .neo-pressed):hover, .neo-button.neo-hover.neo-flat-hover:hover:not(:active, .neo-pressed):focus-visible, .neo-button.neo-hover.neo-flat-hover:hover:not(:active, .neo-pressed):hover, .neo-button.neo-flat-active.neo-pressed:focus-visible, .neo-button.neo-flat-active.neo-pressed:hover, .neo-button.neo-flat-active:active:focus-visible, .neo-button.neo-flat-active:active:hover, .neo-button.neo-flat:not(.neo-borderless, .neo-hover-flat:hover, .neo-hover-flat:focus-visible, .neo-hover-flat.neo-hovered, .neo-pressed, :active):focus-visible, .neo-button.neo-flat:not(.neo-borderless, .neo-hover-flat:hover, .neo-hover-flat:focus-visible, .neo-hover-flat.neo-hovered, .neo-pressed, :active):hover {
+.neo-button.neo-hover.neo-flat-hover.neo-hovered:focus-visible, .neo-button.neo-hover.neo-flat-hover.neo-hovered:hover, .neo-button.neo-hover.neo-flat-hover:focus-visible:not(:active, .neo-pressed):focus-visible, .neo-button.neo-hover.neo-flat-hover:focus-visible:not(:active, .neo-pressed):hover, .neo-button.neo-hover.neo-flat-hover:hover:not(:active, .neo-pressed):focus-visible, .neo-button.neo-hover.neo-flat-hover:hover:not(:active, .neo-pressed):hover, .neo-button.neo-flat-active.neo-pressed:focus-visible, .neo-button.neo-flat-active.neo-pressed:hover, .neo-button.neo-flat-active:active:focus-visible, .neo-button.neo-flat-active:active:hover, .neo-button.neo-flat:not(.neo-borderless,
+.neo-hover-flat:hover,
+.neo-hover-flat:focus-visible,
+.neo-hover-flat.neo-hovered,
+.neo-pressed,
+:active):focus-visible, .neo-button.neo-flat:not(.neo-borderless,
+.neo-hover-flat:hover,
+.neo-hover-flat:focus-visible,
+.neo-hover-flat.neo-hovered,
+.neo-pressed,
+:active):hover {
   border-color: var(--neo-btn-border-color-hover, var(--neo-border-color-highlight));
 }
 .neo-button.neo-glass {
+  --neo-background-color-tinted-hover: var(--neo-glass-background-color-tinted-hover);
   --neo-background-color-tinted: var(--neo-glass-background-color-tinted);
   --neo-skeleton-color: var(--neo-glass-skeleton-color);
   --neo-border-color: var(--neo-glass-border-color);
   background-color: var(--neo-btn-bg-color, var(--neo-glass-background-color));
   backdrop-filter: var(--neo-btn-backdrop-filter, var(--neo-blur-2) var(--neo-saturate-3));
 }
+.neo-button.neo-glass.neo-inset-hover:hover, .neo-button.neo-glass.neo-inset-hover:focus-visible, .neo-button.neo-glass.neo-inset-hover.neo-pressed, .neo-button.neo-glass.neo-inset-hover:active:not(.neo-loading,
+:disabled,
+[disabled=true],
+:has(:global(:where(.neo-button.neo-propagation:active)))), .neo-button.neo-glass.neo-inset:hover, .neo-button.neo-glass.neo-inset:focus-visible, .neo-button.neo-glass.neo-inset.neo-pressed, .neo-button.neo-glass.neo-inset:active:not(.neo-loading,
+:disabled,
+[disabled=true],
+:has(:global(:where(.neo-button.neo-propagation:active)))) {
+  background-color: var(--neo-btn-bg-color-hover, var(--neo-glass-background-color-hover));
+}
 .neo-button.neo-glass:not(.neo-inset,
 .neo-inset-hover:hover,
 .neo-inset-hover:focus-visible,
@@ -397,10 +457,25 @@
 :active) {
   border-color: var(--neo-btn-border-color, var(--neo-glass-top-border-color) var(--neo-glass-right-border-color) var(--neo-glass-bottom-border-color) var(--neo-glass-left-border-color));
 }
-.neo-button.neo-glass.neo-hover.neo-flat-hover.neo-hovered, .neo-button.neo-glass.neo-hover.neo-flat-hover:focus-visible:not(:active, .neo-pressed), .neo-button.neo-glass.neo-hover.neo-flat-hover:hover:not(:active, .neo-pressed), .neo-button.neo-glass.neo-flat-active.neo-pressed, .neo-button.neo-glass.neo-flat-active:active, .neo-button.neo-glass.neo-flat:not(.neo-borderless, .neo-hover-flat:hover, .neo-hover-flat:focus-visible, .neo-hover-flat.neo-hovered, .neo-pressed, :active) {
+.neo-button.neo-glass.neo-hover.neo-flat-hover.neo-hovered, .neo-button.neo-glass.neo-hover.neo-flat-hover:focus-visible:not(:active, .neo-pressed), .neo-button.neo-glass.neo-hover.neo-flat-hover:hover:not(:active, .neo-pressed), .neo-button.neo-glass.neo-flat-active.neo-pressed, .neo-button.neo-glass.neo-flat-active:active, .neo-button.neo-glass.neo-flat:not(.neo-borderless,
+.neo-hover-flat:hover,
+.neo-hover-flat:focus-visible,
+.neo-hover-flat.neo-hovered,
+.neo-pressed,
+:active) {
   border-color: var(--neo-btn-border-color, var(--neo-glass-border-color-flat));
 }
-.neo-button.neo-glass.neo-hover.neo-flat-hover.neo-hovered:focus-visible, .neo-button.neo-glass.neo-hover.neo-flat-hover.neo-hovered:hover, .neo-button.neo-glass.neo-hover.neo-flat-hover:focus-visible:not(:active, .neo-pressed):focus-visible, .neo-button.neo-glass.neo-hover.neo-flat-hover:focus-visible:not(:active, .neo-pressed):hover, .neo-button.neo-glass.neo-hover.neo-flat-hover:hover:not(:active, .neo-pressed):focus-visible, .neo-button.neo-glass.neo-hover.neo-flat-hover:hover:not(:active, .neo-pressed):hover, .neo-button.neo-glass.neo-flat-active.neo-pressed:focus-visible, .neo-button.neo-glass.neo-flat-active.neo-pressed:hover, .neo-button.neo-glass.neo-flat-active:active:focus-visible, .neo-button.neo-glass.neo-flat-active:active:hover, .neo-button.neo-glass.neo-flat:not(.neo-borderless, .neo-hover-flat:hover, .neo-hover-flat:focus-visible, .neo-hover-flat.neo-hovered, .neo-pressed, :active):focus-visible, .neo-button.neo-glass.neo-flat:not(.neo-borderless, .neo-hover-flat:hover, .neo-hover-flat:focus-visible, .neo-hover-flat.neo-hovered, .neo-pressed, :active):hover {
+.neo-button.neo-glass.neo-hover.neo-flat-hover.neo-hovered:focus-visible, .neo-button.neo-glass.neo-hover.neo-flat-hover.neo-hovered:hover, .neo-button.neo-glass.neo-hover.neo-flat-hover:focus-visible:not(:active, .neo-pressed):focus-visible, .neo-button.neo-glass.neo-hover.neo-flat-hover:focus-visible:not(:active, .neo-pressed):hover, .neo-button.neo-glass.neo-hover.neo-flat-hover:hover:not(:active, .neo-pressed):focus-visible, .neo-button.neo-glass.neo-hover.neo-flat-hover:hover:not(:active, .neo-pressed):hover, .neo-button.neo-glass.neo-flat-active.neo-pressed:focus-visible, .neo-button.neo-glass.neo-flat-active.neo-pressed:hover, .neo-button.neo-glass.neo-flat-active:active:focus-visible, .neo-button.neo-glass.neo-flat-active:active:hover, .neo-button.neo-glass.neo-flat:not(.neo-borderless,
+.neo-hover-flat:hover,
+.neo-hover-flat:focus-visible,
+.neo-hover-flat.neo-hovered,
+.neo-pressed,
+:active):focus-visible, .neo-button.neo-glass.neo-flat:not(.neo-borderless,
+.neo-hover-flat:hover,
+.neo-hover-flat:focus-visible,
+.neo-hover-flat.neo-hovered,
+.neo-pressed,
+:active):hover {
   border-color: var(--neo-btn-border-color-hover, var(--neo-glass-border-color-flat-highlight));
 }
 @starting-style {
@@ -414,9 +489,18 @@
 .neo-button.neo-tinted {
   background-color: var(--neo-btn-bg-color, var(--neo-background-color-tinted));
 }
+.neo-button.neo-tinted.neo-inset-hover:hover, .neo-button.neo-tinted.neo-inset-hover:focus-visible, .neo-button.neo-tinted.neo-inset-hover.neo-pressed, .neo-button.neo-tinted.neo-inset-hover:active:not(.neo-loading,
+:disabled,
+[disabled=true],
+:has(:global(:where(.neo-button.neo-propagation:active)))), .neo-button.neo-tinted.neo-inset:hover, .neo-button.neo-tinted.neo-inset:focus-visible, .neo-button.neo-tinted.neo-inset.neo-pressed, .neo-button.neo-tinted.neo-inset:active:not(.neo-loading,
+:disabled,
+[disabled=true],
+:has(:global(:where(.neo-button.neo-propagation:active)))) {
+  background-color: var(--neo-btn-bg-color-hover, var(--neo-background-color-tinted-hover));
+}
 .neo-button.neo-rounded {
   padding: var(--neo-btn-padding, 0.3125rem 0.75rem);
-  border-radius: var(--neo-btn-border-radius-rounded, var(--neo-border-radius-lg));
+  border-radius: var(--neo-btn-border-radius, var(--neo-border-radius-xxl));
 }
 .neo-button.neo-container {
   display: flex;
@@ -429,7 +513,7 @@
   text-align: start;
 }
 .neo-button.neo-container:focus-visible, .neo-button.neo-container:hover {
-  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;
+  transition: opacity 0.3s ease, color 0.15s ease, background-color 0.15s ease, border-color 0.3s ease, backdrop-filter 0.3s ease, border-radius 0.3s ease, box-shadow 0.15s ease-out;
 }
 .neo-button:disabled:disabled, .neo-button[disabled]:not([disabled=false]) {
   cursor: not-allowed;
@@ -456,7 +540,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;
 }
@@ -478,7 +562,9 @@
 .neo-button.neo-empty {
   padding: var(--neo-btn-padding-empty, 0.5rem);
 }
-.neo-button.neo-empty.neo-pressed.neo-pressed.neo-scale .neo-content, .neo-button.neo-empty:active:not(.neo-loading, :disabled, [disabled=true]).neo-scale .neo-content {
+.neo-button.neo-empty.neo-pressed.neo-pressed.neo-scale .neo-content, .neo-button.neo-empty:active:not(.neo-loading,
+:disabled,
+[disabled=true] :has(:global(:where(.neo-button.neo-propagation:active)))).neo-scale .neo-content {
   scale: var(--neo-btn-scale-pressed-empty, var(--neo-btn-scale-pressed, 0.9));
 }
 .neo-button.neo-pulse {

package/dist/buttons/NeoButtonGroup.svelte

@@ -2,6 +2,7 @@
   import type { NeoButtonGroupContext, NeoButtonGroupProps } from './neo-button-group.model.js';
 
   import { toAction, toActionProps, toTransition, toTransitionProps } from '../utils/action.utils.js';
+  import { computeBorderRadius } from '../utils/border.utils.js';
   import { getColorVariable } from '../utils/colors.utils.js';
   import {
     coerce,
@@ -55,6 +56,9 @@
     width: _width,
     height: _height,
 
+    offsetWidth = $bindable(),
+    offsetHeight = $bindable(),
+
     // Transition
     in: inAction,
     out: outAction,
@@ -120,6 +124,8 @@
 <svelte:element
   this={tag}
   bind:this={ref}
+  bind:offsetWidth
+  bind:offsetHeight
   class:neo-button-group={true}
   class:neo-borderless={borderless}
   class:neo-start={start}
@@ -144,6 +150,7 @@
   style:--neo-btn-group-box-shadow-btn-hover={buttonHoverShadow}
   style:--neo-btn-group-box-shadow-btn-active={buttonActiveShadow}
   style:--neo-btn-group-glass-blur={filter}
+  style:--neo-btn-group-border-radius={computeBorderRadius(rounded)}
   style:justify-content={justify}
   style:align-items={align}
   style:flex
@@ -248,17 +255,17 @@
   border-color: transparent !important;
 }
 .neo-button-group :global(.neo-button:disabled:not(.neo-pressed)),
-.neo-button-group :global(.neo-button[disabled]:not([disabled="false"], .neo-pressed)) {
+.neo-button-group :global(.neo-button[disabled]:not([disabled='false'], .neo-pressed)) {
   box-shadow: var(--neo-box-shadow-flat) !important;
 }
-.neo-button-group :global(.neo-button:not(:active:not(.neo-loading), .neo-pressed)) {
+.neo-button-group :global(.neo-button:not(:active:not(.neo-loading, :has(.neo-button.neo-propagation:active)), .neo-pressed)) {
   box-shadow: var(--neo-box-shadow-flat);
 }
-.neo-button-group :global(.neo-button:not(.neo-flat, :active:not(.neo-loading), .neo-pressed):hover) {
+.neo-button-group :global(.neo-button:not(.neo-flat, :active:not(.neo-loading, :has(.neo-button.neo-propagation:active)), .neo-pressed):hover) {
   box-shadow: var(--neo-btn-group-box-shadow-btn-hover);
 }
 .neo-button-group :global(.neo-button.neo-pressed),
-.neo-button-group :global(.neo-button:active:not(.neo-loading)) {
+.neo-button-group :global(.neo-button:active:not(.neo-loading, :has(.neo-button.neo-propagation:active))) {
   box-shadow: var(--neo-btn-group-box-shadow-btn-active);
 }
 .neo-button-group.neo-pulse {
@@ -315,10 +322,10 @@
 }
 .neo-button-group.neo-rounded {
   padding: 0.25rem 0.3125rem;
-  border-radius: var(--neo-btn-groupborder-radius-rounded, var(--neo-border-radius-lg));
+  border-radius: var(--neo-btn-groupborder-radius-rounded, var(--neo-border-radius-xxl));
 }
 .neo-button-group.neo-rounded :global(.neo-button) {
-  border-radius: var(--neo-btn-groupborder-radius-rounded, var(--neo-border-radius-lg));
+  border-radius: var(--neo-btn-groupborder-radius-rounded, var(--neo-border-radius-xxl));
 }
 .neo-button-group.neo-skeleton {
   box-shadow: var(--neo-box-shadow-flat);
@@ -330,7 +337,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;
 }
@@ -359,12 +366,14 @@
 .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;
 }
 .neo-button-group.neo-vertical :global(.neo-divider) {
   max-width: calc(100% - 0.5rem);
 }
+.neo-button-group.neo-vertical {
+  --neo-btn-group-scale-x: 1.75;
+  --neo-btn-group-scale-y: 1.5;
+}
 .neo-button-group.neo-vertical :global(.neo-button) {
   width: 100%;
 }

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

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