@yewdiel21/motion-kit 0.19.0 → 0.19.1

package/dist/{chunk-KDIJX6G4.js → chunk-PVN7YVKV.js}

@@ -18,7 +18,7 @@ import {
   slideIndicator,
   splitGraphemes,
   takeMovement
-} from "./chunk-Y4GIBTRG.js";
+} from "./chunk-NCGNIPJE.js";
 import {
   clamp,
   damp,
@@ -4491,4 +4491,4 @@ export {
   createScrollDock,
   createLocalClock
 };
-//# sourceMappingURL=chunk-KDIJX6G4.js.map
+//# sourceMappingURL=chunk-PVN7YVKV.js.map

package/dist/css/components/pill-button.css

@@ -52,19 +52,24 @@ mk-pill-button {
 
 [data-mk-pill-icon] {
   display: inline-grid;
+  flex: none;
   place-items: center;
   width: 1.125rem;
   height: 1.125rem;
+  font-size: 1.125rem;
   color: var(--mk-pill-on-ink);
-  transition: transform 0.45s var(--mk-ease-swatch);
 }
 
-[data-mk-pill-icon] svg {
+[data-mk-pill-icon] :is(svg, .mk-icon) {
   display: block;
   width: 100%;
   height: 100%;
 }
 
+[data-mk-pill-icon] .mk-icon {
+  font-size: inherit;
+}
+
 /* Gathered: on hover, keyboard focus or a tap. */
 @media (hover: hover) {
   :is([data-mk-pill=''], .mk-pill-button:is(button, a):not([data-mk-pill])):hover [data-mk-pill-fill] {
@@ -74,9 +79,6 @@ mk-pill-button {
     color: var(--mk-pill-ink);
     transform: translateX(-0.5rem);
   }
-  :is([data-mk-pill], .mk-pill-button:is(button, a)):hover [data-mk-pill-icon] {
-    transform: translateX(2px);
-  }
 }
 [data-mk-pill='']:is(:focus-visible, [data-mk-active]) [data-mk-pill-fill] {
   clip-path: var(--mk-pill-gathered);

package/dist/css/components/scroll-island.css

@@ -74,6 +74,8 @@ mk-scroll-island {
 [data-mk-island-content] {
   display: inline-flex;
   flex: none;
+  box-sizing: border-box;
+  width: max-content;
   max-width: 100%;
   min-width: 0;
   align-items: center;
@@ -88,6 +90,10 @@ mk-scroll-island {
   transition: opacity 0.18s ease;
 }
 
+[data-mk-island-percent] {
+  flex: none;
+}
+
 [data-mk-scroll-island][data-mk-state='island'] [data-mk-island-content] {
   opacity: 1;
   transition-delay: 0.1s;

package/dist/elements/index.js

@@ -16,7 +16,7 @@ import {
   createToolbar,
   createVoiceDots,
   toast
-} from "../chunk-PEDYJ2TV.js";
+} from "../chunk-LIXSOGS2.js";
 import {
   createActivityFeed,
   createAddToCart,
@@ -104,7 +104,7 @@ import {
   createWaveformPlayer,
   createWheelPicker,
   iconSvg
-} from "../chunk-Y4GIBTRG.js";
+} from "../chunk-NCGNIPJE.js";
 import "../chunk-RVSKEBIC.js";
 import "../chunk-OLT3CWDJ.js";
 import "../chunk-TGV27ZWM.js";

package/dist/index.css

@@ -16118,6 +16118,8 @@ mk-scroll-island {
 [data-mk-island-content] {
   display: inline-flex;
   flex: none;
+  box-sizing: border-box;
+  width: max-content;
   max-width: 100%;
   min-width: 0;
   align-items: center;
@@ -16132,6 +16134,10 @@ mk-scroll-island {
   transition: opacity 0.18s ease;
 }
 
+[data-mk-island-percent] {
+  flex: none;
+}
+
 [data-mk-scroll-island][data-mk-state='island'] [data-mk-island-content] {
   opacity: 1;
   transition-delay: 0.1s;
@@ -16211,19 +16217,24 @@ mk-pill-button {
 
 [data-mk-pill-icon] {
   display: inline-grid;
+  flex: none;
   place-items: center;
   width: 1.125rem;
   height: 1.125rem;
+  font-size: 1.125rem;
   color: var(--mk-pill-on-ink);
-  transition: transform 0.45s var(--mk-ease-swatch);
 }
 
-[data-mk-pill-icon] svg {
+[data-mk-pill-icon] :is(svg, .mk-icon) {
   display: block;
   width: 100%;
   height: 100%;
 }
 
+[data-mk-pill-icon] .mk-icon {
+  font-size: inherit;
+}
+
 /* Gathered: on hover, keyboard focus or a tap. */
 @media (hover: hover) {
   :is([data-mk-pill=''], .mk-pill-button:is(button, a):not([data-mk-pill])):hover [data-mk-pill-fill] {
@@ -16233,9 +16244,6 @@ mk-pill-button {
     color: var(--mk-pill-ink);
     transform: translateX(-0.5rem);
   }
-  :is([data-mk-pill], .mk-pill-button:is(button, a)):hover [data-mk-pill-icon] {
-    transform: translateX(2px);
-  }
 }
 [data-mk-pill='']:is(:focus-visible, [data-mk-active]) [data-mk-pill-fill] {
   clip-path: var(--mk-pill-gathered);

package/dist/index.js

@@ -58,7 +58,7 @@ import {
   reflowLayout,
   toggleDetails,
   trackScroll
-} from "./chunk-KDIJX6G4.js";
+} from "./chunk-PVN7YVKV.js";
 import {
   NAV_STYLES,
   NAV_STYLE_ALIASES,
@@ -95,7 +95,7 @@ import {
   toNavStyle,
   toast,
   toastTimers
-} from "./chunk-PEDYJ2TV.js";
+} from "./chunk-LIXSOGS2.js";
 import {
   BRAND_LABELS,
   CHANNEL_LABELS,
@@ -331,7 +331,7 @@ import {
   tokenize,
   transparentColor,
   tweenNumber
-} from "./chunk-Y4GIBTRG.js";
+} from "./chunk-NCGNIPJE.js";
 import "./chunk-RVSKEBIC.js";
 import {
   clamp,

package/dist/react/index.js

@@ -55,7 +55,7 @@ import {
   pileLayers,
   pileStyle,
   reflowLayout
-} from "../chunk-KDIJX6G4.js";
+} from "../chunk-PVN7YVKV.js";
 import {
   NAV_STYLES,
   NAV_STYLE_ALIASES,
@@ -83,7 +83,7 @@ import {
   revealShell,
   toNavStyle,
   toast
-} from "../chunk-PEDYJ2TV.js";
+} from "../chunk-LIXSOGS2.js";
 import {
   ICON_PATHS,
   confetti,
@@ -186,7 +186,7 @@ import {
   tokenLines,
   tokenize,
   tweenNumber
-} from "../chunk-Y4GIBTRG.js";
+} from "../chunk-NCGNIPJE.js";
 import {
   DEFAULT_THEME,
   MK_THEME_HEAD_SCRIPT,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yewdiel21/motion-kit",
-  "version": "0.19.0",
+  "version": "0.19.1",
   "description": "Motion toolkit for vanilla, Astro and React: GSAP recipes, accessible components, 19 themes, CSS controls and optional WebGL effects.",
   "type": "module",
   "license": "UNLICENSED",
@@ -8,7 +8,15 @@
   "bugs": {
     "url": "https://github.com/YewdielMartinez/motion-kit/issues"
   },
-  "keywords": ["animation", "gsap", "react", "astro", "webgl", "motion", "ui"],
+  "keywords": [
+    "animation",
+    "gsap",
+    "react",
+    "astro",
+    "webgl",
+    "motion",
+    "ui"
+  ],
   "repository": {
     "type": "git",
     "url": "git+https://github.com/YewdielMartinez/motion-kit.git",
@@ -69,12 +77,6 @@
     "NOTICE",
     "css.d.ts"
   ],
-  "scripts": {
-    "build": "tsup && node scripts/build-css.mjs",
-    "prepack": "pnpm run build",
-    "test": "vitest run",
-    "typecheck": "tsc --noEmit"
-  },
   "peerDependencies": {
     "gsap": ">=3.13.0",
     "react": ">=18",
@@ -106,5 +108,10 @@
     "tsup": "^8.5.1",
     "typescript": "5.9.3",
     "vitest": "4.1.11"
+  },
+  "scripts": {
+    "build": "tsup && node scripts/build-css.mjs",
+    "test": "vitest run",
+    "typecheck": "tsc --noEmit"
   }
-}
+}

package/src/components/pill-button/engine.ts

@@ -7,7 +7,7 @@ import { press } from '../../motion/micro';
  * Pill button: a dark pill with a label and an arrow. When the pointer comes in
  * (or the keyboard focuses it) the dark fill gathers into a circle around the
  * icon on the swatch curve (.38,.49,0,1.5, a small overshoot), the label slides
- * left and turns to the text colour, and the arrow nudges forward; leaving, the
+ * left and turns to the text colour, and the arrow stays centred; leaving, the
  * fill spreads back into the pill. `expand` turns it around: a circle by the
  * label that spreads into the pill. The motion is CSS (pill-button.css); the
  * engine builds the label, icon and fill when the markup lacks them, presses on

package/src/components/pill-button/pill-button.css

@@ -51,19 +51,24 @@ mk-pill-button {
 
 [data-mk-pill-icon] {
   display: inline-grid;
+  flex: none;
   place-items: center;
   width: 1.125rem;
   height: 1.125rem;
+  font-size: 1.125rem;
   color: var(--mk-pill-on-ink);
-  transition: transform 0.45s var(--mk-ease-swatch);
 }
 
-[data-mk-pill-icon] svg {
+[data-mk-pill-icon] :is(svg, .mk-icon) {
   display: block;
   width: 100%;
   height: 100%;
 }
 
+[data-mk-pill-icon] .mk-icon {
+  font-size: inherit;
+}
+
 /* Gathered: on hover, keyboard focus or a tap. */
 @media (hover: hover) {
   :is([data-mk-pill=''], .mk-pill-button:is(button, a):not([data-mk-pill])):hover [data-mk-pill-fill] {
@@ -73,9 +78,6 @@ mk-pill-button {
     color: var(--mk-pill-ink);
     transform: translateX(-0.5rem);
   }
-  :is([data-mk-pill], .mk-pill-button:is(button, a)):hover [data-mk-pill-icon] {
-    transform: translateX(2px);
-  }
 }
 [data-mk-pill='']:is(:focus-visible, [data-mk-active]) [data-mk-pill-fill] {
   clip-path: var(--mk-pill-gathered);

package/src/components/scroll-island/engine.ts

@@ -129,7 +129,12 @@ export function createScrollIsland(root: HTMLElement | null, options: ScrollIsla
     const size = as === 'island' ? ISLAND_HEIGHT : Math.max(MIN_BAR, Math.min(height, height * (scroller.clientHeight / Math.max(1, scroller.scrollHeight))));
     const top = (height - size) * progress();
     if (as !== 'island') return { top, height: size, width: BAR_WIDTH, borderRadius: BAR_WIDTH / 2 };
-    return { top, height: size, width: Math.min(Math.max(ISLAND_HEIGHT, track().right - track().left - INSET * 2), Math.max(ISLAND_HEIGHT, content.scrollWidth + 28)), borderRadius: size / 2 };
+    // Measure at the content's natural width, independent of the collapsed bar
+    // or an interrupted expansion. Padding is already included in offsetWidth.
+    content.style.maxWidth = 'none';
+    const width = content.offsetWidth;
+    content.style.removeProperty('max-width');
+    return { top, height: size, width: Math.min(Math.max(ISLAND_HEIGHT, track().right - track().left - INSET * 2), Math.max(ISLAND_HEIGHT, width)), borderRadius: size / 2 };
   };
 
   const place = () => {
@@ -189,6 +194,10 @@ export function createScrollIsland(root: HTMLElement | null, options: ScrollIsla
   scope.on(window, 'resize', () => go(state, true));
 
   const near = (x: number, y: number) => {
+    if (state === 'island') {
+      const capsule = thumb.getBoundingClientRect();
+      if (x >= capsule.left && x <= capsule.right && y >= capsule.top && y <= capsule.bottom) return true;
+    }
     const box = track();
     return y >= box.top - INSET && y <= box.top + box.height + INSET && x <= box.right && box.right - x <= reach;
   };

package/src/components/scroll-island/scroll-island.css

@@ -73,6 +73,8 @@ mk-scroll-island {
 [data-mk-island-content] {
   display: inline-flex;
   flex: none;
+  box-sizing: border-box;
+  width: max-content;
   max-width: 100%;
   min-width: 0;
   align-items: center;
@@ -87,6 +89,10 @@ mk-scroll-island {
   transition: opacity 0.18s ease;
 }
 
+[data-mk-island-percent] {
+  flex: none;
+}
+
 [data-mk-scroll-island][data-mk-state='island'] [data-mk-island-content] {
   opacity: 1;
   transition-delay: 0.1s;