kempo-ui 0.4.0 → 0.4.2

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 (82) hide show
  1. package/bin/get_icon.js +0 -0
  2. package/bin/highlight_code.js +0 -0
  3. package/bin/icon.js +0 -0
  4. package/bin/list_icons.js +0 -0
  5. package/dist/components/Slider.js +188 -0
  6. package/dist/components/Split.js +31 -13
  7. package/docs/components/accordion.html +4 -0
  8. package/docs/components/aside.html +4 -0
  9. package/docs/components/card.html +4 -0
  10. package/docs/components/code-editor.html +4 -0
  11. package/docs/components/color-picker.html +4 -0
  12. package/docs/components/combobox.html +4 -0
  13. package/docs/components/content-slider.html +4 -0
  14. package/docs/components/context.html +4 -0
  15. package/docs/components/dialog.html +4 -0
  16. package/docs/components/dropdown.html +4 -0
  17. package/docs/components/filter-list.html +4 -0
  18. package/docs/components/focus-capture.html +4 -0
  19. package/docs/components/html-editor.html +4 -0
  20. package/docs/components/hybrid-component.html +4 -0
  21. package/docs/components/icon.html +4 -0
  22. package/docs/components/import.html +4 -0
  23. package/docs/components/light-component.html +4 -0
  24. package/docs/components/nav-spacer.html +4 -0
  25. package/docs/components/nav.html +4 -0
  26. package/docs/components/photo-viewer.html +4 -0
  27. package/docs/components/progress.html +4 -0
  28. package/docs/components/resize.html +4 -0
  29. package/docs/components/shadow-component.html +4 -0
  30. package/docs/components/show-more.html +4 -0
  31. package/docs/components/slider.html +781 -0
  32. package/docs/components/sortable.html +4 -0
  33. package/docs/components/spinner.html +4 -0
  34. package/docs/components/split.html +32 -3
  35. package/docs/components/table.html +4 -0
  36. package/docs/components/tableControls.html +4 -0
  37. package/docs/components/tableCustomFields.html +4 -0
  38. package/docs/components/tableFetchRecords.html +4 -0
  39. package/docs/components/tableFieldSortHide.html +4 -0
  40. package/docs/components/tablePagination.html +4 -0
  41. package/docs/components/tablePlaceholder.html +4 -0
  42. package/docs/components/tableRecordEditing.html +4 -0
  43. package/docs/components/tableRecordFiltering.html +4 -0
  44. package/docs/components/tableRecordHiding.html +4 -0
  45. package/docs/components/tableRecordSearching.html +4 -0
  46. package/docs/components/tableRecordSelection.html +4 -0
  47. package/docs/components/tableRowControls.html +4 -0
  48. package/docs/components/tableServerSync.html +4 -0
  49. package/docs/components/tableSorting.html +4 -0
  50. package/docs/components/tabs.html +4 -0
  51. package/docs/components/tags.html +4 -0
  52. package/docs/components/theme-select.html +4 -0
  53. package/docs/components/theme-switcher.html +4 -0
  54. package/docs/components/timestamp.html +4 -0
  55. package/docs/components/toast.html +4 -0
  56. package/docs/components/toggle.html +4 -0
  57. package/docs/components/tree.html +4 -0
  58. package/docs/index.html +10 -0
  59. package/docs/src/components/Slider.js +188 -0
  60. package/docs/src/components/Split.js +31 -13
  61. package/docs/utils/context.html +4 -0
  62. package/docs/utils/cookie.html +4 -0
  63. package/docs/utils/debounce.html +4 -0
  64. package/docs/utils/drag.html +4 -0
  65. package/docs/utils/elevation.html +4 -0
  66. package/docs/utils/formatTimestamp.html +4 -0
  67. package/docs/utils/object.html +4 -0
  68. package/docs/utils/propConverters.html +4 -0
  69. package/docs/utils/string.html +4 -0
  70. package/docs/utils/theme.html +4 -0
  71. package/docs/utils/toTitleCase.html +4 -0
  72. package/docs/utils/type.html +4 -0
  73. package/docs/utils/wait.html +4 -0
  74. package/docs-src/components/slider.page.html +331 -0
  75. package/docs-src/components/split.page.html +28 -3
  76. package/docs-src/index.page.html +6 -0
  77. package/docs-src/nav.fragment.html +4 -0
  78. package/llms.txt +1 -0
  79. package/package.json +1 -1
  80. package/src/components/Slider.js +480 -0
  81. package/src/components/Split.js +163 -132
  82. package/tests/components/Slider.browser-test.js +823 -0
@@ -111,6 +111,9 @@
111
111
  <k-filter-item filter-keywords="show more showmore components"><a
112
112
  href="../components/show-more.html"
113
113
  >Show More<br><small>Component</small></a></k-filter-item>
114
+ <k-filter-item filter-keywords="slider range input step components"><a
115
+ href="../components/slider.html"
116
+ >Slider<br><small>Component</small></a></k-filter-item>
114
117
  <k-filter-item filter-keywords="sortable drag drop sort components"><a
115
118
  href="../components/sortable.html"
116
119
  >Sortable<br><small>Component</small></a></k-filter-item>
@@ -285,6 +288,7 @@
285
288
  <a href="../components/progress.html">Progress</a>
286
289
  <a href="../components/resize.html">Resize</a>
287
290
  <a href="../components/show-more.html">Show More</a>
291
+ <a href="../components/slider.html">Slider</a>
288
292
  <a href="../components/sortable.html">Sortable</a>
289
293
  <a href="../components/spinner.html">Spinner</a>
290
294
  <a href="../components/split.html">Split</a>
@@ -111,6 +111,9 @@
111
111
  <k-filter-item filter-keywords="show more showmore components"><a
112
112
  href="../components/show-more.html"
113
113
  >Show More<br><small>Component</small></a></k-filter-item>
114
+ <k-filter-item filter-keywords="slider range input step components"><a
115
+ href="../components/slider.html"
116
+ >Slider<br><small>Component</small></a></k-filter-item>
114
117
  <k-filter-item filter-keywords="sortable drag drop sort components"><a
115
118
  href="../components/sortable.html"
116
119
  >Sortable<br><small>Component</small></a></k-filter-item>
@@ -285,6 +288,7 @@
285
288
  <a href="../components/progress.html">Progress</a>
286
289
  <a href="../components/resize.html">Resize</a>
287
290
  <a href="../components/show-more.html">Show More</a>
291
+ <a href="../components/slider.html">Slider</a>
288
292
  <a href="../components/sortable.html">Sortable</a>
289
293
  <a href="../components/spinner.html">Spinner</a>
290
294
  <a href="../components/split.html">Split</a>
@@ -111,6 +111,9 @@
111
111
  <k-filter-item filter-keywords="show more showmore components"><a
112
112
  href="../components/show-more.html"
113
113
  >Show More<br><small>Component</small></a></k-filter-item>
114
+ <k-filter-item filter-keywords="slider range input step components"><a
115
+ href="../components/slider.html"
116
+ >Slider<br><small>Component</small></a></k-filter-item>
114
117
  <k-filter-item filter-keywords="sortable drag drop sort components"><a
115
118
  href="../components/sortable.html"
116
119
  >Sortable<br><small>Component</small></a></k-filter-item>
@@ -285,6 +288,7 @@
285
288
  <a href="../components/progress.html">Progress</a>
286
289
  <a href="../components/resize.html">Resize</a>
287
290
  <a href="../components/show-more.html">Show More</a>
291
+ <a href="../components/slider.html">Slider</a>
288
292
  <a href="../components/sortable.html">Sortable</a>
289
293
  <a href="../components/spinner.html">Spinner</a>
290
294
  <a href="../components/split.html">Split</a>
@@ -451,6 +455,7 @@
451
455
  <a href="#resizing">Resizing</a><br />
452
456
  <a href="#verticalSplit">Vertical Split</a><br />
453
457
  <a href="#persistentState">Persistent State</a><br />
458
+ <a href="#grip">Grip</a><br />
454
459
  <h6 class="mt"><a href="#jsRef" class="no-link">JavaScript Reference</a></h6>
455
460
  <a href="#constructor">Constructor</a><br />
456
461
  <a href="#requirements">Requirements</a><br />
@@ -501,11 +506,11 @@
501
506
  <h3>Sizes</h3>
502
507
  <p>Set the CSS Custom Property <code>--pane_1_size</code> to set the initial size of the first pane.</p>
503
508
  <p>Set the CSS Custom Property <code>--min_pane_size</code> to set the minimum size each pane can be.</p>
504
- <p>Set the CSS Custom Property <code>--handle_width</code> to set the size of the handle (the draggable region between the panes).</p>
509
+ <p>Set the CSS Custom Property <code>--handle_width</code> to set the size of the handle (the draggable region between the panes), odd sizes are recommended so it can be centered on the border.</p>
505
510
  <div class="row -mx">
506
511
  <div class="col m-span-12 px">
507
512
  <k-card label="HTML">
508
- <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-split</span><br /> <span class="hljs-attr">style</span>=<span class="hljs-string">"<br /> --pane_1_size: 100px;<br /> --min_pane_size: 100px;<br /> --handle_width: 20px;<br /> height: 10rem<br /> "</span><br /> <span class="hljs-attr">class</span>=<span class="hljs-string">"b"</span><br />&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>left<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"right"</span>&gt;</span>right<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-split</span>&gt;</span></code></pre>
513
+ <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-split</span><br /> <span class="hljs-attr">style</span>=<span class="hljs-string">"<br /> --pane_1_size: 100px;<br /> --min_pane_size: 100px;<br /> --handle_width: 19px;<br /> height: 10rem<br /> "</span><br /> <span class="hljs-attr">class</span>=<span class="hljs-string">"b"</span><br />&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>left<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"right"</span>&gt;</span>right<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-split</span>&gt;</span></code></pre>
509
514
  </k-card>
510
515
  </div>
511
516
  <div class="col m-span-12 px">
@@ -514,7 +519,7 @@
514
519
  style="
515
520
  --pane_1_size: 100px;
516
521
  --min_pane_size: 100px;
517
- --handle_width: 20px;
522
+ --handle_width: 19px;
518
523
  height: 10rem
519
524
  "
520
525
  class="b"
@@ -583,6 +588,28 @@
583
588
  </div>
584
589
  </div>
585
590
 
591
+ <h3 id="grip"><a href="#grip" class="no-link">Grip</a></h3>
592
+ <p>Add the <code>grip</code> attribute to render a visual grip indicator centered on the divider handle, making it easier to identify the draggable area.</p>
593
+ <div class="row -mx mb">
594
+ <div class="col d-span-6 m-span-12 px">
595
+ <k-card label="HTML">
596
+ <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-split</span> <span class="hljs-attr">grip</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"height: 10rem"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"b mb"</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>Left Pane Content<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"right"</span>&gt;</span>Right Pane Content<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-split</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">k-split</span> <span class="hljs-attr">grip</span> <span class="hljs-attr">direction</span>=<span class="hljs-string">"vertical"</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"height: 16rem"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"b"</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>Top Pane Content<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"right"</span>&gt;</span>Bottom Pane Content<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-split</span>&gt;</span></code></pre>
597
+ </k-card>
598
+ </div>
599
+ <div class="col d-span-6 m-span-12 px">
600
+ <k-card label="Results">
601
+ <k-split grip style="height: 10rem" class="b mb">
602
+ <div>Left Pane Content</div>
603
+ <div slot="right">Right Pane Content</div>
604
+ </k-split>
605
+ <k-split grip direction="vertical" style="height: 16rem" class="b">
606
+ <div>Top Pane Content</div>
607
+ <div slot="right">Bottom Pane Content</div>
608
+ </k-split>
609
+ </k-card>
610
+ </div>
611
+ </div>
612
+
586
613
  <h2 id="jsRef">JavaScript Reference</h2>
587
614
 
588
615
  <h3 id="constructor"><a href="#constructor" class="no-link">Constructor</a></h3>
@@ -607,6 +634,8 @@
607
634
  <p>The direction of the split. Can be <code>"horizontal"</code> (default) or <code>"vertical"</code>. Syncs to <code>direction</code> attribute.</p>
608
635
  <h5><code>persistentId<i>: string</i></code></h5>
609
636
  <p>When set, the pane size is saved to <code>localStorage</code> on resize and restored on initialization. Must be unique per split instance. Syncs to <code>persistent-id</code> attribute.</p>
637
+ <h5><code>grip<i>: boolean</i></code></h5>
638
+ <p>When set, renders a visual grip indicator centered on the divider handle. Syncs to <code>grip</code> attribute.</p>
610
639
 
611
640
  <h3 id="cssCustomProperties"><a href="#cssCustomProperties" class="no-link">CSS Custom Properties</a></h3>
612
641
  <h5><code>--pane_1_size</code></h5>
@@ -111,6 +111,9 @@
111
111
  <k-filter-item filter-keywords="show more showmore components"><a
112
112
  href="../components/show-more.html"
113
113
  >Show More<br><small>Component</small></a></k-filter-item>
114
+ <k-filter-item filter-keywords="slider range input step components"><a
115
+ href="../components/slider.html"
116
+ >Slider<br><small>Component</small></a></k-filter-item>
114
117
  <k-filter-item filter-keywords="sortable drag drop sort components"><a
115
118
  href="../components/sortable.html"
116
119
  >Sortable<br><small>Component</small></a></k-filter-item>
@@ -285,6 +288,7 @@
285
288
  <a href="../components/progress.html">Progress</a>
286
289
  <a href="../components/resize.html">Resize</a>
287
290
  <a href="../components/show-more.html">Show More</a>
291
+ <a href="../components/slider.html">Slider</a>
288
292
  <a href="../components/sortable.html">Sortable</a>
289
293
  <a href="../components/spinner.html">Spinner</a>
290
294
  <a href="../components/split.html">Split</a>
@@ -149,6 +149,9 @@
149
149
  <k-filter-item filter-keywords="show more showmore components"><a
150
150
  href="../components/show-more.html"
151
151
  >Show More<br><small>Component</small></a></k-filter-item>
152
+ <k-filter-item filter-keywords="slider range input step components"><a
153
+ href="../components/slider.html"
154
+ >Slider<br><small>Component</small></a></k-filter-item>
152
155
  <k-filter-item filter-keywords="sortable drag drop sort components"><a
153
156
  href="../components/sortable.html"
154
157
  >Sortable<br><small>Component</small></a></k-filter-item>
@@ -323,6 +326,7 @@
323
326
  <a href="../components/progress.html">Progress</a>
324
327
  <a href="../components/resize.html">Resize</a>
325
328
  <a href="../components/show-more.html">Show More</a>
329
+ <a href="../components/slider.html">Slider</a>
326
330
  <a href="../components/sortable.html">Sortable</a>
327
331
  <a href="../components/spinner.html">Spinner</a>
328
332
  <a href="../components/split.html">Split</a>
@@ -149,6 +149,9 @@
149
149
  <k-filter-item filter-keywords="show more showmore components"><a
150
150
  href="../components/show-more.html"
151
151
  >Show More<br><small>Component</small></a></k-filter-item>
152
+ <k-filter-item filter-keywords="slider range input step components"><a
153
+ href="../components/slider.html"
154
+ >Slider<br><small>Component</small></a></k-filter-item>
152
155
  <k-filter-item filter-keywords="sortable drag drop sort components"><a
153
156
  href="../components/sortable.html"
154
157
  >Sortable<br><small>Component</small></a></k-filter-item>
@@ -323,6 +326,7 @@
323
326
  <a href="../components/progress.html">Progress</a>
324
327
  <a href="../components/resize.html">Resize</a>
325
328
  <a href="../components/show-more.html">Show More</a>
329
+ <a href="../components/slider.html">Slider</a>
326
330
  <a href="../components/sortable.html">Sortable</a>
327
331
  <a href="../components/spinner.html">Spinner</a>
328
332
  <a href="../components/split.html">Split</a>
@@ -150,6 +150,9 @@
150
150
  <k-filter-item filter-keywords="show more showmore components"><a
151
151
  href="../components/show-more.html"
152
152
  >Show More<br><small>Component</small></a></k-filter-item>
153
+ <k-filter-item filter-keywords="slider range input step components"><a
154
+ href="../components/slider.html"
155
+ >Slider<br><small>Component</small></a></k-filter-item>
153
156
  <k-filter-item filter-keywords="sortable drag drop sort components"><a
154
157
  href="../components/sortable.html"
155
158
  >Sortable<br><small>Component</small></a></k-filter-item>
@@ -324,6 +327,7 @@
324
327
  <a href="../components/progress.html">Progress</a>
325
328
  <a href="../components/resize.html">Resize</a>
326
329
  <a href="../components/show-more.html">Show More</a>
330
+ <a href="../components/slider.html">Slider</a>
327
331
  <a href="../components/sortable.html">Sortable</a>
328
332
  <a href="../components/spinner.html">Spinner</a>
329
333
  <a href="../components/split.html">Split</a>
@@ -150,6 +150,9 @@
150
150
  <k-filter-item filter-keywords="show more showmore components"><a
151
151
  href="../components/show-more.html"
152
152
  >Show More<br><small>Component</small></a></k-filter-item>
153
+ <k-filter-item filter-keywords="slider range input step components"><a
154
+ href="../components/slider.html"
155
+ >Slider<br><small>Component</small></a></k-filter-item>
153
156
  <k-filter-item filter-keywords="sortable drag drop sort components"><a
154
157
  href="../components/sortable.html"
155
158
  >Sortable<br><small>Component</small></a></k-filter-item>
@@ -324,6 +327,7 @@
324
327
  <a href="../components/progress.html">Progress</a>
325
328
  <a href="../components/resize.html">Resize</a>
326
329
  <a href="../components/show-more.html">Show More</a>
330
+ <a href="../components/slider.html">Slider</a>
327
331
  <a href="../components/sortable.html">Sortable</a>
328
332
  <a href="../components/spinner.html">Spinner</a>
329
333
  <a href="../components/split.html">Split</a>
@@ -149,6 +149,9 @@
149
149
  <k-filter-item filter-keywords="show more showmore components"><a
150
150
  href="../components/show-more.html"
151
151
  >Show More<br><small>Component</small></a></k-filter-item>
152
+ <k-filter-item filter-keywords="slider range input step components"><a
153
+ href="../components/slider.html"
154
+ >Slider<br><small>Component</small></a></k-filter-item>
152
155
  <k-filter-item filter-keywords="sortable drag drop sort components"><a
153
156
  href="../components/sortable.html"
154
157
  >Sortable<br><small>Component</small></a></k-filter-item>
@@ -323,6 +326,7 @@
323
326
  <a href="../components/progress.html">Progress</a>
324
327
  <a href="../components/resize.html">Resize</a>
325
328
  <a href="../components/show-more.html">Show More</a>
329
+ <a href="../components/slider.html">Slider</a>
326
330
  <a href="../components/sortable.html">Sortable</a>
327
331
  <a href="../components/spinner.html">Spinner</a>
328
332
  <a href="../components/split.html">Split</a>
@@ -113,6 +113,9 @@
113
113
  <k-filter-item filter-keywords="show more showmore components"><a
114
114
  href="../components/show-more.html"
115
115
  >Show More<br><small>Component</small></a></k-filter-item>
116
+ <k-filter-item filter-keywords="slider range input step components"><a
117
+ href="../components/slider.html"
118
+ >Slider<br><small>Component</small></a></k-filter-item>
116
119
  <k-filter-item filter-keywords="sortable drag drop sort components"><a
117
120
  href="../components/sortable.html"
118
121
  >Sortable<br><small>Component</small></a></k-filter-item>
@@ -287,6 +290,7 @@
287
290
  <a href="../components/progress.html">Progress</a>
288
291
  <a href="../components/resize.html">Resize</a>
289
292
  <a href="../components/show-more.html">Show More</a>
293
+ <a href="../components/slider.html">Slider</a>
290
294
  <a href="../components/sortable.html">Sortable</a>
291
295
  <a href="../components/spinner.html">Spinner</a>
292
296
  <a href="../components/split.html">Split</a>
@@ -149,6 +149,9 @@
149
149
  <k-filter-item filter-keywords="show more showmore components"><a
150
150
  href="../components/show-more.html"
151
151
  >Show More<br><small>Component</small></a></k-filter-item>
152
+ <k-filter-item filter-keywords="slider range input step components"><a
153
+ href="../components/slider.html"
154
+ >Slider<br><small>Component</small></a></k-filter-item>
152
155
  <k-filter-item filter-keywords="sortable drag drop sort components"><a
153
156
  href="../components/sortable.html"
154
157
  >Sortable<br><small>Component</small></a></k-filter-item>
@@ -323,6 +326,7 @@
323
326
  <a href="../components/progress.html">Progress</a>
324
327
  <a href="../components/resize.html">Resize</a>
325
328
  <a href="../components/show-more.html">Show More</a>
329
+ <a href="../components/slider.html">Slider</a>
326
330
  <a href="../components/sortable.html">Sortable</a>
327
331
  <a href="../components/spinner.html">Spinner</a>
328
332
  <a href="../components/split.html">Split</a>
@@ -150,6 +150,9 @@
150
150
  <k-filter-item filter-keywords="show more showmore components"><a
151
151
  href="../components/show-more.html"
152
152
  >Show More<br><small>Component</small></a></k-filter-item>
153
+ <k-filter-item filter-keywords="slider range input step components"><a
154
+ href="../components/slider.html"
155
+ >Slider<br><small>Component</small></a></k-filter-item>
153
156
  <k-filter-item filter-keywords="sortable drag drop sort components"><a
154
157
  href="../components/sortable.html"
155
158
  >Sortable<br><small>Component</small></a></k-filter-item>
@@ -324,6 +327,7 @@
324
327
  <a href="../components/progress.html">Progress</a>
325
328
  <a href="../components/resize.html">Resize</a>
326
329
  <a href="../components/show-more.html">Show More</a>
330
+ <a href="../components/slider.html">Slider</a>
327
331
  <a href="../components/sortable.html">Sortable</a>
328
332
  <a href="../components/spinner.html">Spinner</a>
329
333
  <a href="../components/split.html">Split</a>
@@ -149,6 +149,9 @@
149
149
  <k-filter-item filter-keywords="show more showmore components"><a
150
150
  href="../components/show-more.html"
151
151
  >Show More<br><small>Component</small></a></k-filter-item>
152
+ <k-filter-item filter-keywords="slider range input step components"><a
153
+ href="../components/slider.html"
154
+ >Slider<br><small>Component</small></a></k-filter-item>
152
155
  <k-filter-item filter-keywords="sortable drag drop sort components"><a
153
156
  href="../components/sortable.html"
154
157
  >Sortable<br><small>Component</small></a></k-filter-item>
@@ -323,6 +326,7 @@
323
326
  <a href="../components/progress.html">Progress</a>
324
327
  <a href="../components/resize.html">Resize</a>
325
328
  <a href="../components/show-more.html">Show More</a>
329
+ <a href="../components/slider.html">Slider</a>
326
330
  <a href="../components/sortable.html">Sortable</a>
327
331
  <a href="../components/spinner.html">Spinner</a>
328
332
  <a href="../components/split.html">Split</a>
@@ -150,6 +150,9 @@
150
150
  <k-filter-item filter-keywords="show more showmore components"><a
151
151
  href="../components/show-more.html"
152
152
  >Show More<br><small>Component</small></a></k-filter-item>
153
+ <k-filter-item filter-keywords="slider range input step components"><a
154
+ href="../components/slider.html"
155
+ >Slider<br><small>Component</small></a></k-filter-item>
153
156
  <k-filter-item filter-keywords="sortable drag drop sort components"><a
154
157
  href="../components/sortable.html"
155
158
  >Sortable<br><small>Component</small></a></k-filter-item>
@@ -324,6 +327,7 @@
324
327
  <a href="../components/progress.html">Progress</a>
325
328
  <a href="../components/resize.html">Resize</a>
326
329
  <a href="../components/show-more.html">Show More</a>
330
+ <a href="../components/slider.html">Slider</a>
327
331
  <a href="../components/sortable.html">Sortable</a>
328
332
  <a href="../components/spinner.html">Spinner</a>
329
333
  <a href="../components/split.html">Split</a>
@@ -149,6 +149,9 @@
149
149
  <k-filter-item filter-keywords="show more showmore components"><a
150
150
  href="../components/show-more.html"
151
151
  >Show More<br><small>Component</small></a></k-filter-item>
152
+ <k-filter-item filter-keywords="slider range input step components"><a
153
+ href="../components/slider.html"
154
+ >Slider<br><small>Component</small></a></k-filter-item>
152
155
  <k-filter-item filter-keywords="sortable drag drop sort components"><a
153
156
  href="../components/sortable.html"
154
157
  >Sortable<br><small>Component</small></a></k-filter-item>
@@ -323,6 +326,7 @@
323
326
  <a href="../components/progress.html">Progress</a>
324
327
  <a href="../components/resize.html">Resize</a>
325
328
  <a href="../components/show-more.html">Show More</a>
329
+ <a href="../components/slider.html">Slider</a>
326
330
  <a href="../components/sortable.html">Sortable</a>
327
331
  <a href="../components/spinner.html">Spinner</a>
328
332
  <a href="../components/split.html">Split</a>
@@ -149,6 +149,9 @@
149
149
  <k-filter-item filter-keywords="show more showmore components"><a
150
150
  href="../components/show-more.html"
151
151
  >Show More<br><small>Component</small></a></k-filter-item>
152
+ <k-filter-item filter-keywords="slider range input step components"><a
153
+ href="../components/slider.html"
154
+ >Slider<br><small>Component</small></a></k-filter-item>
152
155
  <k-filter-item filter-keywords="sortable drag drop sort components"><a
153
156
  href="../components/sortable.html"
154
157
  >Sortable<br><small>Component</small></a></k-filter-item>
@@ -323,6 +326,7 @@
323
326
  <a href="../components/progress.html">Progress</a>
324
327
  <a href="../components/resize.html">Resize</a>
325
328
  <a href="../components/show-more.html">Show More</a>
329
+ <a href="../components/slider.html">Slider</a>
326
330
  <a href="../components/sortable.html">Sortable</a>
327
331
  <a href="../components/spinner.html">Spinner</a>
328
332
  <a href="../components/split.html">Split</a>
@@ -149,6 +149,9 @@
149
149
  <k-filter-item filter-keywords="show more showmore components"><a
150
150
  href="../components/show-more.html"
151
151
  >Show More<br><small>Component</small></a></k-filter-item>
152
+ <k-filter-item filter-keywords="slider range input step components"><a
153
+ href="../components/slider.html"
154
+ >Slider<br><small>Component</small></a></k-filter-item>
152
155
  <k-filter-item filter-keywords="sortable drag drop sort components"><a
153
156
  href="../components/sortable.html"
154
157
  >Sortable<br><small>Component</small></a></k-filter-item>
@@ -323,6 +326,7 @@
323
326
  <a href="../components/progress.html">Progress</a>
324
327
  <a href="../components/resize.html">Resize</a>
325
328
  <a href="../components/show-more.html">Show More</a>
329
+ <a href="../components/slider.html">Slider</a>
326
330
  <a href="../components/sortable.html">Sortable</a>
327
331
  <a href="../components/spinner.html">Spinner</a>
328
332
  <a href="../components/split.html">Split</a>
@@ -150,6 +150,9 @@
150
150
  <k-filter-item filter-keywords="show more showmore components"><a
151
151
  href="../components/show-more.html"
152
152
  >Show More<br><small>Component</small></a></k-filter-item>
153
+ <k-filter-item filter-keywords="slider range input step components"><a
154
+ href="../components/slider.html"
155
+ >Slider<br><small>Component</small></a></k-filter-item>
153
156
  <k-filter-item filter-keywords="sortable drag drop sort components"><a
154
157
  href="../components/sortable.html"
155
158
  >Sortable<br><small>Component</small></a></k-filter-item>
@@ -324,6 +327,7 @@
324
327
  <a href="../components/progress.html">Progress</a>
325
328
  <a href="../components/resize.html">Resize</a>
326
329
  <a href="../components/show-more.html">Show More</a>
330
+ <a href="../components/slider.html">Slider</a>
327
331
  <a href="../components/sortable.html">Sortable</a>
328
332
  <a href="../components/spinner.html">Spinner</a>
329
333
  <a href="../components/split.html">Split</a>
@@ -111,6 +111,9 @@
111
111
  <k-filter-item filter-keywords="show more showmore components"><a
112
112
  href="../components/show-more.html"
113
113
  >Show More<br><small>Component</small></a></k-filter-item>
114
+ <k-filter-item filter-keywords="slider range input step components"><a
115
+ href="../components/slider.html"
116
+ >Slider<br><small>Component</small></a></k-filter-item>
114
117
  <k-filter-item filter-keywords="sortable drag drop sort components"><a
115
118
  href="../components/sortable.html"
116
119
  >Sortable<br><small>Component</small></a></k-filter-item>
@@ -285,6 +288,7 @@
285
288
  <a href="../components/progress.html">Progress</a>
286
289
  <a href="../components/resize.html">Resize</a>
287
290
  <a href="../components/show-more.html">Show More</a>
291
+ <a href="../components/slider.html">Slider</a>
288
292
  <a href="../components/sortable.html">Sortable</a>
289
293
  <a href="../components/spinner.html">Spinner</a>
290
294
  <a href="../components/split.html">Split</a>
@@ -111,6 +111,9 @@
111
111
  <k-filter-item filter-keywords="show more showmore components"><a
112
112
  href="../components/show-more.html"
113
113
  >Show More<br><small>Component</small></a></k-filter-item>
114
+ <k-filter-item filter-keywords="slider range input step components"><a
115
+ href="../components/slider.html"
116
+ >Slider<br><small>Component</small></a></k-filter-item>
114
117
  <k-filter-item filter-keywords="sortable drag drop sort components"><a
115
118
  href="../components/sortable.html"
116
119
  >Sortable<br><small>Component</small></a></k-filter-item>
@@ -285,6 +288,7 @@
285
288
  <a href="../components/progress.html">Progress</a>
286
289
  <a href="../components/resize.html">Resize</a>
287
290
  <a href="../components/show-more.html">Show More</a>
291
+ <a href="../components/slider.html">Slider</a>
288
292
  <a href="../components/sortable.html">Sortable</a>
289
293
  <a href="../components/spinner.html">Spinner</a>
290
294
  <a href="../components/split.html">Split</a>
@@ -111,6 +111,9 @@
111
111
  <k-filter-item filter-keywords="show more showmore components"><a
112
112
  href="../components/show-more.html"
113
113
  >Show More<br><small>Component</small></a></k-filter-item>
114
+ <k-filter-item filter-keywords="slider range input step components"><a
115
+ href="../components/slider.html"
116
+ >Slider<br><small>Component</small></a></k-filter-item>
114
117
  <k-filter-item filter-keywords="sortable drag drop sort components"><a
115
118
  href="../components/sortable.html"
116
119
  >Sortable<br><small>Component</small></a></k-filter-item>
@@ -285,6 +288,7 @@
285
288
  <a href="../components/progress.html">Progress</a>
286
289
  <a href="../components/resize.html">Resize</a>
287
290
  <a href="../components/show-more.html">Show More</a>
291
+ <a href="../components/slider.html">Slider</a>
288
292
  <a href="../components/sortable.html">Sortable</a>
289
293
  <a href="../components/spinner.html">Spinner</a>
290
294
  <a href="../components/split.html">Split</a>
@@ -111,6 +111,9 @@
111
111
  <k-filter-item filter-keywords="show more showmore components"><a
112
112
  href="../components/show-more.html"
113
113
  >Show More<br><small>Component</small></a></k-filter-item>
114
+ <k-filter-item filter-keywords="slider range input step components"><a
115
+ href="../components/slider.html"
116
+ >Slider<br><small>Component</small></a></k-filter-item>
114
117
  <k-filter-item filter-keywords="sortable drag drop sort components"><a
115
118
  href="../components/sortable.html"
116
119
  >Sortable<br><small>Component</small></a></k-filter-item>
@@ -285,6 +288,7 @@
285
288
  <a href="../components/progress.html">Progress</a>
286
289
  <a href="../components/resize.html">Resize</a>
287
290
  <a href="../components/show-more.html">Show More</a>
291
+ <a href="../components/slider.html">Slider</a>
288
292
  <a href="../components/sortable.html">Sortable</a>
289
293
  <a href="../components/spinner.html">Spinner</a>
290
294
  <a href="../components/split.html">Split</a>
@@ -111,6 +111,9 @@
111
111
  <k-filter-item filter-keywords="show more showmore components"><a
112
112
  href="../components/show-more.html"
113
113
  >Show More<br><small>Component</small></a></k-filter-item>
114
+ <k-filter-item filter-keywords="slider range input step components"><a
115
+ href="../components/slider.html"
116
+ >Slider<br><small>Component</small></a></k-filter-item>
114
117
  <k-filter-item filter-keywords="sortable drag drop sort components"><a
115
118
  href="../components/sortable.html"
116
119
  >Sortable<br><small>Component</small></a></k-filter-item>
@@ -285,6 +288,7 @@
285
288
  <a href="../components/progress.html">Progress</a>
286
289
  <a href="../components/resize.html">Resize</a>
287
290
  <a href="../components/show-more.html">Show More</a>
291
+ <a href="../components/slider.html">Slider</a>
288
292
  <a href="../components/sortable.html">Sortable</a>
289
293
  <a href="../components/spinner.html">Spinner</a>
290
294
  <a href="../components/split.html">Split</a>
@@ -111,6 +111,9 @@
111
111
  <k-filter-item filter-keywords="show more showmore components"><a
112
112
  href="../components/show-more.html"
113
113
  >Show More<br><small>Component</small></a></k-filter-item>
114
+ <k-filter-item filter-keywords="slider range input step components"><a
115
+ href="../components/slider.html"
116
+ >Slider<br><small>Component</small></a></k-filter-item>
114
117
  <k-filter-item filter-keywords="sortable drag drop sort components"><a
115
118
  href="../components/sortable.html"
116
119
  >Sortable<br><small>Component</small></a></k-filter-item>
@@ -285,6 +288,7 @@
285
288
  <a href="../components/progress.html">Progress</a>
286
289
  <a href="../components/resize.html">Resize</a>
287
290
  <a href="../components/show-more.html">Show More</a>
291
+ <a href="../components/slider.html">Slider</a>
288
292
  <a href="../components/sortable.html">Sortable</a>
289
293
  <a href="../components/spinner.html">Spinner</a>
290
294
  <a href="../components/split.html">Split</a>
@@ -111,6 +111,9 @@
111
111
  <k-filter-item filter-keywords="show more showmore components"><a
112
112
  href="../components/show-more.html"
113
113
  >Show More<br><small>Component</small></a></k-filter-item>
114
+ <k-filter-item filter-keywords="slider range input step components"><a
115
+ href="../components/slider.html"
116
+ >Slider<br><small>Component</small></a></k-filter-item>
114
117
  <k-filter-item filter-keywords="sortable drag drop sort components"><a
115
118
  href="../components/sortable.html"
116
119
  >Sortable<br><small>Component</small></a></k-filter-item>
@@ -285,6 +288,7 @@
285
288
  <a href="../components/progress.html">Progress</a>
286
289
  <a href="../components/resize.html">Resize</a>
287
290
  <a href="../components/show-more.html">Show More</a>
291
+ <a href="../components/slider.html">Slider</a>
288
292
  <a href="../components/sortable.html">Sortable</a>
289
293
  <a href="../components/spinner.html">Spinner</a>
290
294
  <a href="../components/split.html">Split</a>
@@ -111,6 +111,9 @@
111
111
  <k-filter-item filter-keywords="show more showmore components"><a
112
112
  href="../components/show-more.html"
113
113
  >Show More<br><small>Component</small></a></k-filter-item>
114
+ <k-filter-item filter-keywords="slider range input step components"><a
115
+ href="../components/slider.html"
116
+ >Slider<br><small>Component</small></a></k-filter-item>
114
117
  <k-filter-item filter-keywords="sortable drag drop sort components"><a
115
118
  href="../components/sortable.html"
116
119
  >Sortable<br><small>Component</small></a></k-filter-item>
@@ -285,6 +288,7 @@
285
288
  <a href="../components/progress.html">Progress</a>
286
289
  <a href="../components/resize.html">Resize</a>
287
290
  <a href="../components/show-more.html">Show More</a>
291
+ <a href="../components/slider.html">Slider</a>
288
292
  <a href="../components/sortable.html">Sortable</a>
289
293
  <a href="../components/spinner.html">Spinner</a>
290
294
  <a href="../components/split.html">Split</a>
package/docs/index.html CHANGED
@@ -111,6 +111,9 @@
111
111
  <k-filter-item filter-keywords="show more showmore components"><a
112
112
  href="./components/show-more.html"
113
113
  >Show More<br><small>Component</small></a></k-filter-item>
114
+ <k-filter-item filter-keywords="slider range input step components"><a
115
+ href="./components/slider.html"
116
+ >Slider<br><small>Component</small></a></k-filter-item>
114
117
  <k-filter-item filter-keywords="sortable drag drop sort components"><a
115
118
  href="./components/sortable.html"
116
119
  >Sortable<br><small>Component</small></a></k-filter-item>
@@ -285,6 +288,7 @@
285
288
  <a href="./components/progress.html">Progress</a>
286
289
  <a href="./components/resize.html">Resize</a>
287
290
  <a href="./components/show-more.html">Show More</a>
291
+ <a href="./components/slider.html">Slider</a>
288
292
  <a href="./components/sortable.html">Sortable</a>
289
293
  <a href="./components/spinner.html">Spinner</a>
290
294
  <a href="./components/split.html">Split</a>
@@ -600,6 +604,12 @@
600
604
  <p class="tc-muted">Truncate long content with a "show more" button to expand.</p>
601
605
  </a>
602
606
  </div>
607
+ <div class="span-12 t-span-6 d-span-4 px">
608
+ <a href="./components/slider.html" class="card mb no-link d-b">
609
+ <h3 class="tc-primary">Slider</h3>
610
+ <p class="tc-muted">Range input with configurable min, max, and discrete step snap points.</p>
611
+ </a>
612
+ </div>
603
613
  <div class="span-12 t-span-6 d-span-4 px">
604
614
  <a href="./components/sortable.html" class="card mb no-link d-b">
605
615
  <h3 class="tc-primary">Sortable</h3>