@yewdiel21/motion-kit 0.17.0 → 0.18.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (146) hide show
  1. package/README.md +23 -0
  2. package/dist/auto/index.d.ts +18 -3
  3. package/dist/auto/index.js +32 -2
  4. package/dist/auto/index.js.map +1 -1
  5. package/dist/{chunk-VJFPTLAK.js → chunk-AWDEKDEJ.js} +2 -2
  6. package/dist/{chunk-BZLMCHUD.js → chunk-EDMXWUW3.js} +2 -2
  7. package/dist/{chunk-7IQTMF7Y.js → chunk-Q7IW4FV3.js} +2580 -58
  8. package/dist/chunk-Q7IW4FV3.js.map +1 -0
  9. package/dist/css/components/badge-button.css +16 -0
  10. package/dist/css/components/bento-grid.css +13 -0
  11. package/dist/css/components/drilldown-menu.css +11 -7
  12. package/dist/css/components/equalizer-slider.css +26 -0
  13. package/dist/css/components/handwriting-text.css +15 -0
  14. package/dist/css/components/magnetize-button.css +18 -0
  15. package/dist/css/components/morphing-page-dots.css +13 -0
  16. package/dist/css/components/not-found.css +22 -0
  17. package/dist/css/components/notification-stack.css +42 -0
  18. package/dist/css/components/particle-button.css +14 -0
  19. package/dist/css/components/radio-group.css +29 -0
  20. package/dist/css/components/rating-scale.css +23 -0
  21. package/dist/css/components/scroll-preview-dock.css +18 -0
  22. package/dist/css/components/select.css +16 -0
  23. package/dist/css/components/signature-pad.css +130 -103
  24. package/dist/css/components/stepper.css +36 -0
  25. package/dist/css/components/sticky-header.css +10 -0
  26. package/dist/css/components/temperature-slider.css +29 -0
  27. package/dist/css/components/voice-message-bubble.css +62 -45
  28. package/dist/css/components/waveform-player.css +49 -34
  29. package/dist/css/components/wheel-picker.css +16 -15
  30. package/dist/css/tokens.css +4 -0
  31. package/dist/elements/index.d.ts +206 -4
  32. package/dist/elements/index.js +581 -6
  33. package/dist/elements/index.js.map +1 -1
  34. package/dist/{engine-Bn6hC87X.d.ts → engine-t8d7brjn.d.ts} +341 -1
  35. package/dist/index.css +578 -170
  36. package/dist/index.d.ts +23 -23
  37. package/dist/index.js +33 -3
  38. package/dist/index.js.map +1 -1
  39. package/dist/react/index.d.ts +113 -7
  40. package/dist/react/index.js +669 -3
  41. package/dist/react/index.js.map +1 -1
  42. package/dist/{reduced-YS6TZjpa.d.ts → reduced-dPsZYqtI.d.ts} +1 -1
  43. package/dist/{store-CZ6vdtIE.d.ts → store-6hZNKiee.d.ts} +1 -1
  44. package/package.json +1 -1
  45. package/registry.json +180 -0
  46. package/src/auto/auto-init.ts +31 -0
  47. package/src/components/badge-button/README.md +28 -0
  48. package/src/components/badge-button/badge-button.css +15 -0
  49. package/src/components/badge-button/element.ts +16 -0
  50. package/src/components/badge-button/engine.ts +85 -0
  51. package/src/components/badge-button/react.tsx +31 -0
  52. package/src/components/bento-grid/README.md +26 -0
  53. package/src/components/bento-grid/bento-grid.css +12 -0
  54. package/src/components/bento-grid/element.ts +22 -0
  55. package/src/components/bento-grid/engine.ts +153 -0
  56. package/src/components/bento-grid/react.tsx +25 -0
  57. package/src/components/drilldown-menu/drilldown-menu.css +11 -7
  58. package/src/components/drilldown-menu/engine.ts +44 -4
  59. package/src/components/equalizer-slider/README.md +43 -0
  60. package/src/components/equalizer-slider/element.ts +41 -0
  61. package/src/components/equalizer-slider/engine.ts +32 -0
  62. package/src/components/equalizer-slider/equalizer-slider.css +26 -0
  63. package/src/components/equalizer-slider/react.tsx +60 -0
  64. package/src/components/equalizer-slider/shared.ts +161 -0
  65. package/src/components/handwriting-text/README.md +29 -0
  66. package/src/components/handwriting-text/element.ts +14 -0
  67. package/src/components/handwriting-text/engine.ts +108 -0
  68. package/src/components/handwriting-text/glyphs.ts +71 -0
  69. package/src/components/handwriting-text/handwriting-text.css +14 -0
  70. package/src/components/handwriting-text/react.tsx +23 -0
  71. package/src/components/magnetize-button/README.md +26 -0
  72. package/src/components/magnetize-button/element.ts +13 -0
  73. package/src/components/magnetize-button/engine.ts +84 -0
  74. package/src/components/magnetize-button/magnetize-button.css +17 -0
  75. package/src/components/magnetize-button/react.tsx +22 -0
  76. package/src/components/morphing-page-dots/README.md +28 -0
  77. package/src/components/morphing-page-dots/element.ts +16 -0
  78. package/src/components/morphing-page-dots/engine.ts +89 -0
  79. package/src/components/morphing-page-dots/morphing-page-dots.css +12 -0
  80. package/src/components/morphing-page-dots/react.tsx +32 -0
  81. package/src/components/not-found/README.md +26 -0
  82. package/src/components/not-found/element.ts +15 -0
  83. package/src/components/not-found/engine.ts +57 -0
  84. package/src/components/not-found/not-found.css +21 -0
  85. package/src/components/not-found/react.tsx +23 -0
  86. package/src/components/notification-stack/README.md +24 -0
  87. package/src/components/notification-stack/element.ts +26 -0
  88. package/src/components/notification-stack/engine.ts +329 -0
  89. package/src/components/notification-stack/notification-stack.css +41 -0
  90. package/src/components/notification-stack/react.tsx +28 -0
  91. package/src/components/particle-button/README.md +26 -0
  92. package/src/components/particle-button/element.ts +13 -0
  93. package/src/components/particle-button/engine.ts +52 -0
  94. package/src/components/particle-button/particle-button.css +13 -0
  95. package/src/components/particle-button/react.tsx +22 -0
  96. package/src/components/radio-group/README.md +43 -0
  97. package/src/components/radio-group/element.ts +41 -0
  98. package/src/components/radio-group/engine.ts +11 -0
  99. package/src/components/radio-group/radio-group.css +28 -0
  100. package/src/components/radio-group/react.tsx +60 -0
  101. package/src/components/radio-group/shared.ts +118 -0
  102. package/src/components/rating-scale/README.md +43 -0
  103. package/src/components/rating-scale/element.ts +41 -0
  104. package/src/components/rating-scale/engine.ts +63 -0
  105. package/src/components/rating-scale/rating-scale.css +22 -0
  106. package/src/components/rating-scale/react.tsx +60 -0
  107. package/src/components/scroll-preview-dock/README.md +24 -0
  108. package/src/components/scroll-preview-dock/element.ts +20 -0
  109. package/src/components/scroll-preview-dock/engine.ts +228 -0
  110. package/src/components/scroll-preview-dock/react.tsx +26 -0
  111. package/src/components/scroll-preview-dock/scroll-preview-dock.css +17 -0
  112. package/src/components/select/README.md +23 -9
  113. package/src/components/select/select.css +16 -0
  114. package/src/components/signature-pad/engine.ts +550 -437
  115. package/src/components/signature-pad/signature-pad.css +130 -103
  116. package/src/components/stepper/README.md +46 -0
  117. package/src/components/stepper/element.ts +42 -0
  118. package/src/components/stepper/engine.ts +103 -0
  119. package/src/components/stepper/react.tsx +60 -0
  120. package/src/components/stepper/stepper.css +35 -0
  121. package/src/components/sticky-header/README.md +30 -0
  122. package/src/components/sticky-header/element.ts +19 -0
  123. package/src/components/sticky-header/engine.ts +95 -0
  124. package/src/components/sticky-header/react.tsx +25 -0
  125. package/src/components/sticky-header/sticky-header.css +9 -0
  126. package/src/components/temperature-slider/README.md +42 -0
  127. package/src/components/temperature-slider/element.ts +53 -0
  128. package/src/components/temperature-slider/engine.ts +44 -0
  129. package/src/components/temperature-slider/react.tsx +66 -0
  130. package/src/components/temperature-slider/temperature-slider.css +29 -0
  131. package/src/components/voice-message-bubble/engine.ts +11 -0
  132. package/src/components/voice-message-bubble/voice-message-bubble.css +14 -12
  133. package/src/components/waveform-player/README.md +1 -1
  134. package/src/components/waveform-player/engine.ts +344 -261
  135. package/src/components/waveform-player/waveform-player.css +50 -35
  136. package/src/components/wheel-picker/README.md +3 -1
  137. package/src/components/wheel-picker/element.ts +12 -5
  138. package/src/components/wheel-picker/engine.ts +37 -8
  139. package/src/components/wheel-picker/wheel-picker.css +17 -16
  140. package/src/css/tokens.css +4 -0
  141. package/src/elements/index.ts +45 -0
  142. package/src/index.ts +311 -295
  143. package/src/react/index.ts +16 -0
  144. package/dist/chunk-7IQTMF7Y.js.map +0 -1
  145. /package/dist/{chunk-VJFPTLAK.js.map → chunk-AWDEKDEJ.js.map} +0 -0
  146. /package/dist/{chunk-BZLMCHUD.js.map → chunk-EDMXWUW3.js.map} +0 -0
@@ -17,11 +17,13 @@ import {
17
17
  createVoiceDots,
18
18
  iconSvg,
19
19
  toast
20
- } from "../chunk-VJFPTLAK.js";
20
+ } from "../chunk-AWDEKDEJ.js";
21
21
  import {
22
22
  createActivityFeed,
23
23
  createAddToCart,
24
24
  createAttachment,
25
+ createBadgeButton,
26
+ createBentoGrid,
25
27
  createBreadcrumb,
26
28
  createCalendar,
27
29
  createChart,
@@ -43,8 +45,10 @@ import {
43
45
  createDrilldownMenu,
44
46
  createEditableTable,
45
47
  createEmptyState,
48
+ createEqualizerSlider,
46
49
  createFileExplorer,
47
50
  createFilterBuilder,
51
+ createHandwritingText,
48
52
  createHoldConfirm,
49
53
  createHoverCard,
50
54
  createImagePreview,
@@ -53,21 +57,29 @@ import {
53
57
  createLikeButton,
54
58
  createLinkPreview,
55
59
  createLoadingButton,
60
+ createMagnetizeButton,
56
61
  createMenu,
62
+ createMorphingPageDots,
57
63
  createMultiSelect,
64
+ createNotFound,
58
65
  createNotificationBell,
66
+ createNotificationStack,
59
67
  createPagination,
68
+ createParticleButton,
60
69
  createPasswordStrength,
61
70
  createPopover,
62
71
  createProgress,
63
72
  createQuantity,
64
73
  createQuestionnaire,
74
+ createRadioGroup,
65
75
  createRangeCalendar,
66
76
  createRangeSlider,
77
+ createRatingScale,
67
78
  createResizablePanel,
68
79
  createRichTextEditor,
69
80
  createScratchCard,
70
81
  createScrollIsland,
82
+ createScrollPreviewDock,
71
83
  createSelect,
72
84
  createSignaturePad,
73
85
  createSkeleton,
@@ -75,10 +87,13 @@ import {
75
87
  createSplitView,
76
88
  createStarRating,
77
89
  createStatCard,
90
+ createStepper,
78
91
  createSteps,
92
+ createStickyHeader,
79
93
  createStudioDock,
80
94
  createSwipeActions,
81
95
  createTagInput,
96
+ createTemperatureSlider,
82
97
  createTimeField,
83
98
  createTimeline,
84
99
  createTooltip,
@@ -88,7 +103,7 @@ import {
88
103
  createVoiceMessageBubble,
89
104
  createWaveformPlayer,
90
105
  createWheelPicker
91
- } from "../chunk-7IQTMF7Y.js";
106
+ } from "../chunk-Q7IW4FV3.js";
92
107
  import "../chunk-RVSKEBIC.js";
93
108
  import "../chunk-DOOMULVV.js";
94
109
  import "../chunk-TGV27ZWM.js";
@@ -2328,11 +2343,18 @@ var defineDrilldownMenu = () => defineElement("mk-drilldown-menu", MkDrilldownMe
2328
2343
  // src/components/wheel-picker/element.ts
2329
2344
  var MkWheelPickerElement = class extends MkElement {
2330
2345
  static options = { items: "json", value: "string", name: "string", label: "string", disabled: "boolean", visibleItems: "number", itemHeight: "number" };
2346
+ savedValue;
2347
+ savedItems;
2331
2348
  create(options) {
2332
- return createWheelPicker(this, options);
2349
+ return createWheelPicker(this, { ...options, ...this.savedItems ? { items: this.savedItems } : {}, value: this.savedValue ?? options.value });
2333
2350
  }
2334
2351
  attributeChangedCallback(name, previous, next) {
2335
- if (previous === next || !this.instance) return;
2352
+ if (previous === next) return;
2353
+ if (name === "items") this.savedItems = void 0;
2354
+ if (!this.instance) {
2355
+ if (name === "value") this.savedValue = next ?? void 0;
2356
+ return;
2357
+ }
2336
2358
  if (name === "value" && next !== null) {
2337
2359
  this.instance.setValue(next);
2338
2360
  return;
@@ -2342,7 +2364,13 @@ var MkWheelPickerElement = class extends MkElement {
2342
2364
  if (this.options.value !== void 0) this.instance.setValue(String(this.options.value));
2343
2365
  return;
2344
2366
  }
2345
- super.attributeChangedCallback(name, previous, next);
2367
+ this.savedValue = name === "value" ? void 0 : this.instance.value;
2368
+ this.instance.destroy();
2369
+ this.instance = this.create(this.options);
2370
+ }
2371
+ disconnectedCallback() {
2372
+ this.savedValue = this.instance?.value ?? this.savedValue;
2373
+ super.disconnectedCallback();
2346
2374
  }
2347
2375
  get value() {
2348
2376
  return this.instance?.value ?? "";
@@ -2354,11 +2382,513 @@ var MkWheelPickerElement = class extends MkElement {
2354
2382
  this.instance?.setValue(value, notify);
2355
2383
  }
2356
2384
  setItems(items, notify = false) {
2385
+ this.savedItems = items.map((item) => typeof item === "string" ? item : { ...item });
2357
2386
  this.instance?.setItems(items, notify);
2358
2387
  }
2359
2388
  };
2360
2389
  var defineWheelPicker = () => defineElement("mk-wheel-picker", MkWheelPickerElement);
2361
2390
 
2391
+ // src/components/stepper/element.ts
2392
+ var MkStepperElement = class extends MkElement {
2393
+ static options = { "items": "json", "value": "number", "label": "string", "name": "string", "variant": "string", "linear": "boolean", "disabled": "boolean" };
2394
+ baseline;
2395
+ saved;
2396
+ create(options) {
2397
+ const created = createStepper(this, { ...options, value: this.saved !== void 0 ? this.saved : options.value, defaultValue: this.baseline });
2398
+ if (this.baseline === void 0) this.baseline = created.value;
2399
+ this.saved = void 0;
2400
+ return created;
2401
+ }
2402
+ disconnectedCallback() {
2403
+ this.saved = this.instance?.value;
2404
+ super.disconnectedCallback();
2405
+ }
2406
+ attributeChangedCallback(name, previous, next) {
2407
+ if (previous === next) return;
2408
+ if (name === "value" && (!this.instance || !this.isConnected)) {
2409
+ this.saved = next === null ? this.baseline ?? 0 : Number.isFinite(Number(next)) ? Number(next) : this.baseline ?? 0;
2410
+ return;
2411
+ }
2412
+ if (!this.instance || !this.isConnected) return;
2413
+ if (name === "value") {
2414
+ const parsed = next === null ? this.baseline ?? 0 : Number(next);
2415
+ this.instance.setValue(parsed, false);
2416
+ return;
2417
+ }
2418
+ this.saved = this.instance.value;
2419
+ super.attributeChangedCallback(name, previous, next);
2420
+ }
2421
+ get value() {
2422
+ return this.instance?.value ?? this.saved ?? 0;
2423
+ }
2424
+ set value(next) {
2425
+ this.setValue(next);
2426
+ }
2427
+ setValue(value, notify = false) {
2428
+ if (this.instance) this.instance.setValue(value, notify);
2429
+ else this.saved = value;
2430
+ }
2431
+ reset(notify = false) {
2432
+ this.instance?.reset(notify);
2433
+ }
2434
+ next(notify = true) {
2435
+ this.instance?.next(notify);
2436
+ }
2437
+ previous(notify = true) {
2438
+ this.instance?.previous(notify);
2439
+ }
2440
+ };
2441
+ var defineStepper = () => defineElement("mk-stepper", MkStepperElement);
2442
+
2443
+ // src/components/radio-group/element.ts
2444
+ var MkRadioGroupElement = class extends MkElement {
2445
+ static options = { "items": "json", "value": "string", "name": "string", "label": "string", "disabled": "boolean", "required": "boolean", "error": "string", "variant": "string" };
2446
+ baseline;
2447
+ saved;
2448
+ create(options) {
2449
+ const created = createRadioGroup(this, { ...options, value: this.saved !== void 0 ? this.saved : options.value, defaultValue: this.baseline });
2450
+ if (this.baseline === void 0) this.baseline = created.value;
2451
+ this.saved = void 0;
2452
+ return created;
2453
+ }
2454
+ disconnectedCallback() {
2455
+ this.saved = this.instance?.value;
2456
+ super.disconnectedCallback();
2457
+ }
2458
+ attributeChangedCallback(name, previous, next) {
2459
+ if (previous === next) return;
2460
+ if (name === "value" && (!this.instance || !this.isConnected)) {
2461
+ this.saved = next === null ? this.baseline ?? null : next;
2462
+ return;
2463
+ }
2464
+ if (!this.instance || !this.isConnected) return;
2465
+ if (name === "value") {
2466
+ const parsed = next === null ? this.baseline ?? null : next;
2467
+ this.instance.setValue(parsed, false);
2468
+ return;
2469
+ }
2470
+ this.saved = this.instance.value;
2471
+ super.attributeChangedCallback(name, previous, next);
2472
+ }
2473
+ get value() {
2474
+ return this.instance?.value ?? this.saved ?? null;
2475
+ }
2476
+ set value(next) {
2477
+ this.setValue(next);
2478
+ }
2479
+ setValue(value, notify = false) {
2480
+ if (this.instance) this.instance.setValue(value, notify);
2481
+ else this.saved = value;
2482
+ }
2483
+ reset(notify = false) {
2484
+ this.instance?.reset(notify);
2485
+ }
2486
+ };
2487
+ var defineRadioGroup = () => defineElement("mk-radio-group", MkRadioGroupElement);
2488
+
2489
+ // src/components/equalizer-slider/element.ts
2490
+ var MkEqualizerSliderElement = class extends MkElement {
2491
+ static options = { "min": "number", "max": "number", "step": "number", "value": "number", "label": "string", "name": "string", "disabled": "boolean", "error": "string", "waveform": "json", "bars": "number" };
2492
+ baseline;
2493
+ saved;
2494
+ create(options) {
2495
+ const created = createEqualizerSlider(this, { ...options, value: this.saved !== void 0 ? this.saved : options.value, defaultValue: this.baseline });
2496
+ if (this.baseline === void 0) this.baseline = created.value;
2497
+ this.saved = void 0;
2498
+ return created;
2499
+ }
2500
+ disconnectedCallback() {
2501
+ this.saved = this.instance?.value;
2502
+ super.disconnectedCallback();
2503
+ }
2504
+ attributeChangedCallback(name, previous, next) {
2505
+ if (previous === next) return;
2506
+ if (name === "value" && (!this.instance || !this.isConnected)) {
2507
+ this.saved = next === null ? this.baseline ?? 60 : Number.isFinite(Number(next)) ? Number(next) : this.baseline ?? 60;
2508
+ return;
2509
+ }
2510
+ if (!this.instance || !this.isConnected) return;
2511
+ if (name === "value") {
2512
+ const parsed = next === null ? this.baseline ?? 60 : Number(next);
2513
+ this.instance.setValue(parsed, false);
2514
+ return;
2515
+ }
2516
+ this.saved = this.instance.value;
2517
+ super.attributeChangedCallback(name, previous, next);
2518
+ }
2519
+ get value() {
2520
+ return this.instance?.value ?? this.saved ?? 60;
2521
+ }
2522
+ set value(next) {
2523
+ this.setValue(next);
2524
+ }
2525
+ setValue(value, notify = false) {
2526
+ if (this.instance) this.instance.setValue(value, notify);
2527
+ else this.saved = value;
2528
+ }
2529
+ reset(notify = false) {
2530
+ this.instance?.reset(notify);
2531
+ }
2532
+ };
2533
+ var defineEqualizerSlider = () => defineElement("mk-equalizer-slider", MkEqualizerSliderElement);
2534
+
2535
+ // src/components/temperature-slider/element.ts
2536
+ var MkTemperatureSliderElement = class extends MkElement {
2537
+ static options = { "min": "number", "max": "number", "step": "number", "value": "number", "label": "string", "name": "string", "disabled": "boolean", "error": "string", "unit": "string" };
2538
+ baseline;
2539
+ saved;
2540
+ syncing = false;
2541
+ create(options) {
2542
+ const created = createTemperatureSlider(this, { ...options, value: this.saved !== void 0 ? this.saved : options.value, defaultValue: this.baseline });
2543
+ if (this.baseline === void 0) this.baseline = created.value;
2544
+ this.saved = void 0;
2545
+ return created;
2546
+ }
2547
+ disconnectedCallback() {
2548
+ this.saved = this.instance?.value;
2549
+ super.disconnectedCallback();
2550
+ }
2551
+ attributeChangedCallback(name, previous, next) {
2552
+ if (previous === next || this.syncing) return;
2553
+ if (name === "value" && (!this.instance || !this.isConnected)) {
2554
+ this.saved = next === null ? this.baseline ?? 22 : Number.isFinite(Number(next)) ? Number(next) : this.baseline ?? 22;
2555
+ return;
2556
+ }
2557
+ if (!this.instance || !this.isConnected) return;
2558
+ if (name === "value") {
2559
+ const parsed = next === null ? this.baseline ?? 22 : Number(next);
2560
+ this.instance.setValue(parsed, false);
2561
+ return;
2562
+ }
2563
+ this.saved = this.instance.value;
2564
+ super.attributeChangedCallback(name, previous, next);
2565
+ }
2566
+ get value() {
2567
+ return this.instance?.value ?? this.saved ?? 22;
2568
+ }
2569
+ set value(next) {
2570
+ this.setValue(next);
2571
+ }
2572
+ setValue(value, notify = false) {
2573
+ if (this.instance) this.instance.setValue(value, notify);
2574
+ else this.saved = value;
2575
+ }
2576
+ reset(notify = false) {
2577
+ this.instance?.reset(notify);
2578
+ }
2579
+ get unit() {
2580
+ return this.instance?.unit ?? (this.getAttribute("unit") === "F" ? "F" : "C");
2581
+ }
2582
+ /** Converts in place and glides; the unit, min and max attributes follow without remounting. */
2583
+ setUnit(unit, notify = false) {
2584
+ if (!this.instance) {
2585
+ this.setAttribute("unit", unit);
2586
+ return;
2587
+ }
2588
+ this.instance.setUnit(unit, {}, notify);
2589
+ this.syncing = true;
2590
+ try {
2591
+ this.setAttribute("unit", this.instance.unit);
2592
+ for (const name of ["min", "max"]) this.removeAttribute(name);
2593
+ } finally {
2594
+ this.syncing = false;
2595
+ }
2596
+ }
2597
+ };
2598
+ var defineTemperatureSlider = () => defineElement("mk-temperature-slider", MkTemperatureSliderElement);
2599
+
2600
+ // src/components/rating-scale/element.ts
2601
+ var MkRatingScaleElement = class extends MkElement {
2602
+ static options = { "min": "number", "max": "number", "value": "number", "variant": "string", "labels": "json", "label": "string", "name": "string", "disabled": "boolean", "required": "boolean", "error": "string" };
2603
+ baseline;
2604
+ saved;
2605
+ create(options) {
2606
+ const created = createRatingScale(this, { ...options, value: this.saved !== void 0 ? this.saved : options.value, defaultValue: this.baseline });
2607
+ if (this.baseline === void 0) this.baseline = created.value;
2608
+ this.saved = void 0;
2609
+ return created;
2610
+ }
2611
+ disconnectedCallback() {
2612
+ this.saved = this.instance?.value;
2613
+ super.disconnectedCallback();
2614
+ }
2615
+ attributeChangedCallback(name, previous, next) {
2616
+ if (previous === next) return;
2617
+ if (name === "value" && (!this.instance || !this.isConnected)) {
2618
+ this.saved = next === null ? this.baseline ?? null : Number.isFinite(Number(next)) ? Number(next) : this.baseline ?? null;
2619
+ return;
2620
+ }
2621
+ if (!this.instance || !this.isConnected) return;
2622
+ if (name === "value") {
2623
+ const parsed = next === null ? this.baseline ?? null : Number(next);
2624
+ this.instance.setValue(parsed, false);
2625
+ return;
2626
+ }
2627
+ this.saved = this.instance.value;
2628
+ super.attributeChangedCallback(name, previous, next);
2629
+ }
2630
+ get value() {
2631
+ return this.instance?.value ?? this.saved ?? null;
2632
+ }
2633
+ set value(next) {
2634
+ this.setValue(next);
2635
+ }
2636
+ setValue(value, notify = false) {
2637
+ if (this.instance) this.instance.setValue(value, notify);
2638
+ else this.saved = value;
2639
+ }
2640
+ reset(notify = false) {
2641
+ this.instance?.reset(notify);
2642
+ }
2643
+ };
2644
+ var defineRatingScale = () => defineElement("mk-rating-scale", MkRatingScaleElement);
2645
+
2646
+ // src/components/notification-stack/element.ts
2647
+ var MkNotificationStackElement = class extends MkElement {
2648
+ static options = { "items": "json", "expanded": "boolean", "direction": "string", "duration": "number", "disabled": "boolean", "label": "string", "labels": "json" };
2649
+ create(options) {
2650
+ return createNotificationStack(this, options);
2651
+ }
2652
+ setOptions(options) {
2653
+ this.instance?.setOptions(options);
2654
+ }
2655
+ push(item) {
2656
+ this.instance?.push(item);
2657
+ }
2658
+ dismiss(id) {
2659
+ this.instance?.dismiss(id);
2660
+ }
2661
+ clear() {
2662
+ this.instance?.clear();
2663
+ }
2664
+ expand() {
2665
+ this.instance?.expand();
2666
+ }
2667
+ collapse() {
2668
+ this.instance?.collapse();
2669
+ }
2670
+ toggle() {
2671
+ this.instance?.toggle();
2672
+ }
2673
+ get expanded() {
2674
+ return this.instance?.expanded ?? false;
2675
+ }
2676
+ set expanded(value) {
2677
+ this.instance?.setOptions({ expanded: value });
2678
+ }
2679
+ get items() {
2680
+ return [...this.instance?.items ?? []];
2681
+ }
2682
+ set items(value) {
2683
+ this.instance?.setOptions({ items: value });
2684
+ }
2685
+ attributeChangedCallback(name, previous, next) {
2686
+ if (previous === next || !this.isConnected || !this.instance) return;
2687
+ const option = name.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase());
2688
+ const defaults = { "items": [], "expanded": false, "direction": "down", "duration": 6e3, "disabled": false, "label": "Notificaciones", "labels": {} };
2689
+ this.instance.setOptions({ [option]: this.options[option] ?? defaults[option] });
2690
+ }
2691
+ };
2692
+ var defineNotificationStack = () => defineElement("mk-notification-stack", MkNotificationStackElement);
2693
+
2694
+ // src/components/bento-grid/element.ts
2695
+ var MkBentoGridElement = class extends MkElement {
2696
+ static options = { "columns": "number", "gap": "number", "filter": "string", "duration": "number" };
2697
+ create(options) {
2698
+ return createBentoGrid(this, options);
2699
+ }
2700
+ setOptions(options) {
2701
+ this.instance?.setOptions(options);
2702
+ }
2703
+ refresh() {
2704
+ this.instance?.refresh();
2705
+ }
2706
+ setFilter(filter) {
2707
+ this.instance?.setFilter(filter);
2708
+ }
2709
+ reorder(keys) {
2710
+ this.instance?.reorder(keys);
2711
+ }
2712
+ mutate(change) {
2713
+ this.instance?.mutate(change);
2714
+ }
2715
+ get filter() {
2716
+ return this.instance?.filter ?? null;
2717
+ }
2718
+ get keys() {
2719
+ return this.instance?.keys ?? [];
2720
+ }
2721
+ attributeChangedCallback(name, previous, next) {
2722
+ if (previous === next || !this.isConnected || !this.instance) return;
2723
+ const option = name.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase());
2724
+ const defaults = { "columns": 3, "gap": 12, "filter": null, "duration": 0.55 };
2725
+ this.instance.setOptions({ [option]: this.options[option] ?? defaults[option] });
2726
+ }
2727
+ };
2728
+ var defineBentoGrid = () => defineElement("mk-bento-grid", MkBentoGridElement);
2729
+
2730
+ // src/components/scroll-preview-dock/element.ts
2731
+ var MkScrollPreviewDockElement = class extends MkElement {
2732
+ static options = { "items": "json", "scroller": "string", "offset": "number", "label": "string", "disabled": "boolean" };
2733
+ create(options) {
2734
+ return createScrollPreviewDock(this, options);
2735
+ }
2736
+ setOptions(options) {
2737
+ this.instance?.setOptions(options);
2738
+ }
2739
+ select(id) {
2740
+ this.instance?.select(id);
2741
+ }
2742
+ update() {
2743
+ this.instance?.update();
2744
+ }
2745
+ get value() {
2746
+ return this.instance?.value ?? "";
2747
+ }
2748
+ set items(value) {
2749
+ this.instance?.setOptions({ items: value });
2750
+ }
2751
+ attributeChangedCallback(name, previous, next) {
2752
+ if (previous === next || !this.isConnected || !this.instance) return;
2753
+ const option = name.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase());
2754
+ const defaults = { "items": [], "scroller": null, "offset": 0, "label": "Explorar secciones", "disabled": false };
2755
+ this.instance.setOptions({ [option]: this.options[option] ?? defaults[option] });
2756
+ }
2757
+ };
2758
+ var defineScrollPreviewDock = () => defineElement("mk-scroll-preview-dock", MkScrollPreviewDockElement);
2759
+
2760
+ // src/components/sticky-header/element.ts
2761
+ var MkStickyHeaderElement = class extends MkElement {
2762
+ static options = { "scroller": "string", "expandedHeight": "number", "compactHeight": "number", "threshold": "number", "range": "number", "top": "number", "disabled": "boolean" };
2763
+ create(options) {
2764
+ return createStickyHeader(this, options);
2765
+ }
2766
+ setOptions(options) {
2767
+ this.instance?.setOptions(options);
2768
+ }
2769
+ update() {
2770
+ this.instance?.update();
2771
+ }
2772
+ get compact() {
2773
+ return this.instance?.compact ?? false;
2774
+ }
2775
+ get progress() {
2776
+ return this.instance?.progress ?? 0;
2777
+ }
2778
+ attributeChangedCallback(name, previous, next) {
2779
+ if (previous === next || !this.isConnected || !this.instance) return;
2780
+ const option = name.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase());
2781
+ const defaults = { "scroller": null, "expandedHeight": 104, "compactHeight": 64, "threshold": 8, "range": 96, "top": 0, "disabled": false };
2782
+ this.instance.setOptions({ [option]: this.options[option] ?? defaults[option] });
2783
+ }
2784
+ };
2785
+ var defineStickyHeader = () => defineElement("mk-sticky-header", MkStickyHeaderElement);
2786
+
2787
+ // src/components/handwriting-text/element.ts
2788
+ var MkHandwritingTextElement = class extends MkElement {
2789
+ static options = { text: "string", duration: "number", autoplay: "boolean" };
2790
+ retained;
2791
+ create(options) {
2792
+ return createHandwritingText(this, { ...options, ...this.retained === void 0 ? {} : { text: this.retained } });
2793
+ }
2794
+ disconnectedCallback() {
2795
+ this.retained = this.instance?.text ?? this.retained;
2796
+ super.disconnectedCallback();
2797
+ }
2798
+ attributeChangedCallback(name, previous, next) {
2799
+ if (previous !== next) this.retained = name === "text" ? void 0 : this.instance?.text ?? this.retained;
2800
+ super.attributeChangedCallback(name, previous, next);
2801
+ }
2802
+ };
2803
+ var defineHandwritingText = () => defineElement("mk-handwriting-text", MkHandwritingTextElement);
2804
+
2805
+ // src/components/particle-button/element.ts
2806
+ var MkParticleButtonElement = class extends MkElement {
2807
+ static options = { label: "string", count: "number", distance: "number" };
2808
+ create(options) {
2809
+ return createParticleButton(this, options);
2810
+ }
2811
+ attributeChangedCallback(name, previous, next) {
2812
+ const focused = this.contains(document.activeElement);
2813
+ super.attributeChangedCallback(name, previous, next);
2814
+ if (focused) this.querySelector("button")?.focus({ preventScroll: true });
2815
+ }
2816
+ };
2817
+ var defineParticleButton = () => defineElement("mk-particle-button", MkParticleButtonElement);
2818
+
2819
+ // src/components/magnetize-button/element.ts
2820
+ var MkMagnetizeButtonElement = class extends MkElement {
2821
+ static options = { label: "string", count: "number", reach: "number" };
2822
+ create(options) {
2823
+ return createMagnetizeButton(this, options);
2824
+ }
2825
+ attributeChangedCallback(name, previous, next) {
2826
+ const focused = this.contains(document.activeElement);
2827
+ super.attributeChangedCallback(name, previous, next);
2828
+ if (focused) this.querySelector("button")?.focus({ preventScroll: true });
2829
+ }
2830
+ };
2831
+ var defineMagnetizeButton = () => defineElement("mk-magnetize-button", MkMagnetizeButtonElement);
2832
+
2833
+ // src/components/badge-button/element.ts
2834
+ var MkBadgeButtonElement = class extends MkElement {
2835
+ static options = { label: "string", count: "number", step: "number", hideZero: "boolean", max: "number" };
2836
+ retained;
2837
+ create(options) {
2838
+ return createBadgeButton(this, { ...options, ...this.retained === void 0 ? {} : { count: this.retained } });
2839
+ }
2840
+ disconnectedCallback() {
2841
+ this.retained = this.instance?.count ?? this.retained;
2842
+ super.disconnectedCallback();
2843
+ }
2844
+ attributeChangedCallback(name, previous, next) {
2845
+ const focused = this.contains(document.activeElement);
2846
+ if (previous !== next) this.retained = name === "count" ? void 0 : this.instance?.count ?? this.retained;
2847
+ super.attributeChangedCallback(name, previous, next);
2848
+ if (focused) this.querySelector("button")?.focus({ preventScroll: true });
2849
+ }
2850
+ };
2851
+ var defineBadgeButton = () => defineElement("mk-badge-button", MkBadgeButtonElement);
2852
+
2853
+ // src/components/morphing-page-dots/element.ts
2854
+ var MkMorphingPageDotsElement = class extends MkElement {
2855
+ static options = { count: "number", value: "number", label: "string", labels: "json", pageIds: "json", disabled: "boolean" };
2856
+ retained;
2857
+ create(options) {
2858
+ return createMorphingPageDots(this, { ...options, ...this.retained === void 0 ? {} : { value: this.retained } });
2859
+ }
2860
+ disconnectedCallback() {
2861
+ this.retained = this.instance?.value ?? this.retained;
2862
+ super.disconnectedCallback();
2863
+ }
2864
+ attributeChangedCallback(name, previous, next) {
2865
+ const focusIndex = [...this.querySelectorAll("button")].findIndex((button) => button === document.activeElement);
2866
+ if (previous !== next) this.retained = name === "value" ? void 0 : this.instance?.value ?? this.retained;
2867
+ super.attributeChangedCallback(name, previous, next);
2868
+ if (focusIndex >= 0) {
2869
+ const buttons = this.querySelectorAll("button");
2870
+ buttons[Math.min(focusIndex, buttons.length - 1)]?.focus({ preventScroll: true });
2871
+ }
2872
+ }
2873
+ };
2874
+ var defineMorphingPageDots = () => defineElement("mk-morphing-page-dots", MkMorphingPageDotsElement);
2875
+
2876
+ // src/components/not-found/element.ts
2877
+ var MkNotFoundElement = class extends MkElement {
2878
+ static options = { brand: "string", title: "string", description: "string", homeHref: "string", homeLabel: "string", backLabel: "string", showBack: "boolean" };
2879
+ create(options) {
2880
+ return createNotFound(this, options);
2881
+ }
2882
+ attributeChangedCallback(name, previous, next) {
2883
+ const active = document.activeElement;
2884
+ const focused = this.contains(active);
2885
+ const back = active?.tagName === "BUTTON";
2886
+ super.attributeChangedCallback(name, previous, next);
2887
+ if (focused) (this.querySelector(back ? "button:not(:disabled)" : "a") ?? this.querySelector("a"))?.focus({ preventScroll: true });
2888
+ }
2889
+ };
2890
+ var defineNotFound = () => defineElement("mk-not-found", MkNotFoundElement);
2891
+
2362
2892
  // src/elements/index.ts
2363
2893
  var ELEMENTS = {
2364
2894
  "mk-theme-picker": MkThemePickerElement,
@@ -2445,7 +2975,22 @@ var ELEMENTS = {
2445
2975
  "mk-waveform-player": MkWaveformPlayerElement,
2446
2976
  "mk-voice-message-bubble": MkVoiceMessageBubbleElement,
2447
2977
  "mk-drilldown-menu": MkDrilldownMenuElement,
2448
- "mk-wheel-picker": MkWheelPickerElement
2978
+ "mk-wheel-picker": MkWheelPickerElement,
2979
+ "mk-stepper": MkStepperElement,
2980
+ "mk-radio-group": MkRadioGroupElement,
2981
+ "mk-equalizer-slider": MkEqualizerSliderElement,
2982
+ "mk-temperature-slider": MkTemperatureSliderElement,
2983
+ "mk-rating-scale": MkRatingScaleElement,
2984
+ "mk-notification-stack": MkNotificationStackElement,
2985
+ "mk-bento-grid": MkBentoGridElement,
2986
+ "mk-scroll-preview-dock": MkScrollPreviewDockElement,
2987
+ "mk-sticky-header": MkStickyHeaderElement,
2988
+ "mk-handwriting-text": MkHandwritingTextElement,
2989
+ "mk-particle-button": MkParticleButtonElement,
2990
+ "mk-magnetize-button": MkMagnetizeButtonElement,
2991
+ "mk-badge-button": MkBadgeButtonElement,
2992
+ "mk-morphing-page-dots": MkMorphingPageDotsElement,
2993
+ "mk-not-found": MkNotFoundElement
2449
2994
  // new-component:entries
2450
2995
  };
2451
2996
  function defineElements(names = Object.keys(ELEMENTS)) {
@@ -2456,6 +3001,8 @@ export {
2456
3001
  MkActivityFeedElement,
2457
3002
  MkAddToCartElement,
2458
3003
  MkAttachmentElement,
3004
+ MkBadgeButtonElement,
3005
+ MkBentoGridElement,
2459
3006
  MkBidirectionalSliderElement,
2460
3007
  MkBreadcrumbElement,
2461
3008
  MkCalendarElement,
@@ -2481,8 +3028,10 @@ export {
2481
3028
  MkEditableTableElement,
2482
3029
  MkElement,
2483
3030
  MkEmptyStateElement,
3031
+ MkEqualizerSliderElement,
2484
3032
  MkFileExplorerElement,
2485
3033
  MkFilterBuilderElement,
3034
+ MkHandwritingTextElement,
2486
3035
  MkHeatmapChartElement,
2487
3036
  MkHoldConfirmElement,
2488
3037
  MkHoverCardElement,
@@ -2493,12 +3042,17 @@ export {
2493
3042
  MkLikeButtonElement,
2494
3043
  MkLinkPreviewElement,
2495
3044
  MkLoadingButtonElement,
3045
+ MkMagnetizeButtonElement,
2496
3046
  MkMenuElement,
3047
+ MkMorphingPageDotsElement,
2497
3048
  MkMultiSelectElement,
2498
3049
  MkNavElement,
3050
+ MkNotFoundElement,
2499
3051
  MkNotificationBellElement,
3052
+ MkNotificationStackElement,
2500
3053
  MkOrbitMenuElement,
2501
3054
  MkPaginationElement,
3055
+ MkParticleButtonElement,
2502
3056
  MkPasswordStrengthElement,
2503
3057
  MkPieChartElement,
2504
3058
  MkPillButtonElement,
@@ -2508,13 +3062,16 @@ export {
2508
3062
  MkQuestionnaireElement,
2509
3063
  MkRadarChartElement,
2510
3064
  MkRadialChartElement,
3065
+ MkRadioGroupElement,
2511
3066
  MkRangeCalendarElement,
2512
3067
  MkRangeSliderElement,
3068
+ MkRatingScaleElement,
2513
3069
  MkResizablePanelElement,
2514
3070
  MkRichTextEditorElement,
2515
3071
  MkSankeyChartElement,
2516
3072
  MkScratchCardElement,
2517
3073
  MkScrollIslandElement,
3074
+ MkScrollPreviewDockElement,
2518
3075
  MkSelectElement,
2519
3076
  MkSignaturePadElement,
2520
3077
  MkSkeletonElement,
@@ -2522,10 +3079,13 @@ export {
2522
3079
  MkSplitViewElement,
2523
3080
  MkStarRatingElement,
2524
3081
  MkStatCardElement,
3082
+ MkStepperElement,
2525
3083
  MkStepsElement,
3084
+ MkStickyHeaderElement,
2526
3085
  MkStudioDockElement,
2527
3086
  MkSwipeActionsElement,
2528
3087
  MkTagInputElement,
3088
+ MkTemperatureSliderElement,
2529
3089
  MkThemePickerElement,
2530
3090
  MkTimeFieldElement,
2531
3091
  MkTimelineElement,
@@ -2540,11 +3100,26 @@ export {
2540
3100
  MkWaveformPlayerElement,
2541
3101
  MkWheelPickerElement,
2542
3102
  SafeHTMLElement,
3103
+ defineBadgeButton,
3104
+ defineBentoGrid,
2543
3105
  defineDrilldownMenu,
2544
3106
  defineElement,
2545
3107
  defineElements,
3108
+ defineEqualizerSlider,
3109
+ defineHandwritingText,
3110
+ defineMagnetizeButton,
3111
+ defineMorphingPageDots,
3112
+ defineNotFound,
3113
+ defineNotificationStack,
3114
+ defineParticleButton,
3115
+ defineRadioGroup,
3116
+ defineRatingScale,
3117
+ defineScrollPreviewDock,
2546
3118
  defineSignaturePad,
3119
+ defineStepper,
3120
+ defineStickyHeader,
2547
3121
  defineStudioDock,
3122
+ defineTemperatureSlider,
2548
3123
  defineTrailer,
2549
3124
  defineVoiceMessageBubble,
2550
3125
  defineWaveformPlayer,