luxen-ui 0.2.1 → 0.4.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 (70) hide show
  1. package/cdn/chunks/decorate.js +1 -1
  2. package/cdn/chunks/decorate.js.map +1 -1
  3. package/cdn/custom-elements.json +185 -112
  4. package/cdn/elements/avatar/avatar.js +1 -1
  5. package/cdn/elements/avatar/avatar.js.map +1 -1
  6. package/cdn/elements/badge/badge.js +1 -1
  7. package/cdn/elements/carousel/carousel.d.ts +9 -1
  8. package/cdn/elements/carousel/carousel.d.ts.map +1 -1
  9. package/cdn/elements/carousel/carousel.js +21 -20
  10. package/cdn/elements/carousel/carousel.js.map +1 -1
  11. package/cdn/elements/dialog/dialog.js +1 -1
  12. package/cdn/elements/dialog/dialog.styles.js +1 -1
  13. package/cdn/elements/dialog/dialog.styles.js.map +1 -1
  14. package/cdn/elements/divider/divider.js +1 -1
  15. package/cdn/elements/drawer/drawer.js +1 -1
  16. package/cdn/elements/dropdown/dropdown.d.ts +5 -2
  17. package/cdn/elements/dropdown/dropdown.d.ts.map +1 -1
  18. package/cdn/elements/dropdown/dropdown.js +6 -3
  19. package/cdn/elements/dropdown/dropdown.js.map +1 -1
  20. package/cdn/elements/dropdown-item/dropdown-item.js +1 -1
  21. package/cdn/elements/dropdown-item/dropdown-item.js.map +1 -1
  22. package/cdn/elements/icon/icon.js +1 -1
  23. package/cdn/elements/input-otp/input-otp.d.ts +8 -2
  24. package/cdn/elements/input-otp/input-otp.d.ts.map +1 -1
  25. package/cdn/elements/input-otp/input-otp.js +1 -1
  26. package/cdn/elements/input-otp/input-otp.js.map +1 -1
  27. package/cdn/elements/input-stepper/input-stepper.js +1 -1
  28. package/cdn/elements/popover/popover.js +1 -1
  29. package/cdn/elements/popover/popover.js.map +1 -1
  30. package/cdn/elements/rating/rating.js +1 -1
  31. package/cdn/elements/tabs/tabs.js +1 -1
  32. package/cdn/elements/toast/toast.js +1 -1
  33. package/cdn/elements/toast/toast.js.map +1 -1
  34. package/cdn/elements/tooltip/tooltip.d.ts +3 -3
  35. package/cdn/elements/tooltip/tooltip.js +1 -1
  36. package/cdn/elements/tooltip/tooltip.js.map +1 -1
  37. package/cdn/elements/tree/tree.js +1 -1
  38. package/cdn/elements/tree/tree.js.map +1 -1
  39. package/cdn/elements/tree-item/tree-item.js +1 -1
  40. package/cdn/elements/tree-item/tree-item.js.map +1 -1
  41. package/cdn/shared/luxen-form-associated-element.js +1 -1
  42. package/cdn/styles/elements/divider.css +7 -0
  43. package/cdn/styles/elements/input-otp.css +63 -29
  44. package/cdn/styles/elements/select.css +3 -3
  45. package/cdn/styles/index.css +10 -0
  46. package/dist/css/elements/divider.css +7 -0
  47. package/dist/css/elements/input-otp.css +63 -29
  48. package/dist/css/elements/select.css +3 -3
  49. package/dist/css/index.css +10 -0
  50. package/dist/custom-elements.json +185 -112
  51. package/dist/elements/avatar/avatar.css +13 -7
  52. package/dist/elements/carousel/carousel.css +7 -0
  53. package/dist/elements/carousel/carousel.d.ts +9 -1
  54. package/dist/elements/carousel/carousel.d.ts.map +1 -1
  55. package/dist/elements/carousel/carousel.js +71 -37
  56. package/dist/elements/dialog/dialog.css +10 -0
  57. package/dist/elements/dropdown/dropdown.css +14 -3
  58. package/dist/elements/dropdown/dropdown.d.ts +5 -2
  59. package/dist/elements/dropdown/dropdown.d.ts.map +1 -1
  60. package/dist/elements/dropdown/dropdown.js +19 -7
  61. package/dist/elements/input-otp/input-otp.d.ts +8 -2
  62. package/dist/elements/input-otp/input-otp.d.ts.map +1 -1
  63. package/dist/elements/input-otp/input-otp.js +14 -5
  64. package/dist/elements/tooltip/tooltip.css +15 -7
  65. package/dist/elements/tooltip/tooltip.d.ts +3 -3
  66. package/dist/elements/tooltip/tooltip.js +3 -3
  67. package/dist/skills/luxen-ui/references/dialog.md +76 -0
  68. package/dist/skills/luxen-ui/references/drawer.md +8 -0
  69. package/dist/skills/luxen-ui/references/select.md +1 -1
  70. package/package.json +1 -1
@@ -532,16 +532,7 @@
532
532
  },
533
533
  {
534
534
  "kind": "function",
535
- "name": "l",
536
- "parameters": [
537
- {
538
- "name": "e"
539
- }
540
- ]
541
- },
542
- {
543
- "kind": "function",
544
- "name": "u",
535
+ "name": "c",
545
536
  "parameters": [
546
537
  {
547
538
  "name": "e"
@@ -559,19 +550,11 @@
559
550
  }
560
551
  ],
561
552
  "exports": [
562
- {
563
- "kind": "js",
564
- "name": "a",
565
- "declaration": {
566
- "name": "i",
567
- "module": "cdn/chunks/decorate.js"
568
- }
569
- },
570
553
  {
571
554
  "kind": "js",
572
555
  "name": "i",
573
556
  "declaration": {
574
- "name": "a",
557
+ "name": "i",
575
558
  "module": "cdn/chunks/decorate.js"
576
559
  }
577
560
  },
@@ -579,7 +562,7 @@
579
562
  "kind": "js",
580
563
  "name": "n",
581
564
  "declaration": {
582
- "name": "l",
565
+ "name": "s",
583
566
  "module": "cdn/chunks/decorate.js"
584
567
  }
585
568
  },
@@ -587,7 +570,7 @@
587
570
  "kind": "js",
588
571
  "name": "r",
589
572
  "declaration": {
590
- "name": "s",
573
+ "name": "a",
591
574
  "module": "cdn/chunks/decorate.js"
592
575
  }
593
576
  },
@@ -595,7 +578,7 @@
595
578
  "kind": "js",
596
579
  "name": "t",
597
580
  "declaration": {
598
- "name": "u",
581
+ "name": "c",
599
582
  "module": "cdn/chunks/decorate.js"
600
583
  }
601
584
  }
@@ -1446,21 +1429,15 @@
1446
1429
  "parameters": [
1447
1430
  {
1448
1431
  "name": "e"
1449
- },
1450
- {
1451
- "name": "t"
1452
1432
  }
1453
1433
  ]
1454
1434
  },
1455
1435
  {
1456
1436
  "kind": "function",
1457
- "name": "b",
1437
+ "name": "_",
1458
1438
  "parameters": [
1459
1439
  {
1460
1440
  "name": "e"
1461
- },
1462
- {
1463
- "name": "t"
1464
1441
  }
1465
1442
  ]
1466
1443
  },
@@ -1470,6 +1447,10 @@
1470
1447
  "parameters": [
1471
1448
  {
1472
1449
  "name": "e"
1450
+ },
1451
+ {
1452
+ "name": "t",
1453
+ "default": "0"
1473
1454
  }
1474
1455
  ]
1475
1456
  },
@@ -1628,11 +1609,7 @@
1628
1609
  },
1629
1610
  {
1630
1611
  "kind": "function",
1631
- "name": "m"
1632
- },
1633
- {
1634
- "kind": "function",
1635
- "name": "b"
1612
+ "name": "_"
1636
1613
  },
1637
1614
  {
1638
1615
  "kind": "function",
@@ -1652,26 +1629,10 @@
1652
1629
  }
1653
1630
  ]
1654
1631
  },
1655
- {
1656
- "kind": "function",
1657
- "name": "p"
1658
- },
1659
1632
  {
1660
1633
  "kind": "function",
1661
1634
  "name": "m"
1662
1635
  },
1663
- {
1664
- "kind": "function",
1665
- "name": "m",
1666
- "parameters": [
1667
- {
1668
- "name": "n"
1669
- },
1670
- {
1671
- "name": "r"
1672
- }
1673
- ]
1674
- },
1675
1636
  {
1676
1637
  "kind": "function",
1677
1638
  "name": "m",
@@ -1756,7 +1717,7 @@
1756
1717
  },
1757
1718
  {
1758
1719
  "kind": "function",
1759
- "name": "b"
1720
+ "name": "_"
1760
1721
  },
1761
1722
  {
1762
1723
  "kind": "function",
@@ -1777,7 +1738,11 @@
1777
1738
  },
1778
1739
  {
1779
1740
  "kind": "function",
1780
- "name": "b",
1741
+ "name": "_"
1742
+ },
1743
+ {
1744
+ "kind": "function",
1745
+ "name": "_",
1781
1746
  "parameters": [
1782
1747
  {
1783
1748
  "name": "e"
@@ -1786,39 +1751,35 @@
1786
1751
  },
1787
1752
  {
1788
1753
  "kind": "variable",
1789
- "name": "U"
1790
- },
1791
- {
1792
- "kind": "variable",
1793
- "name": "W"
1754
+ "name": "H"
1794
1755
  },
1795
1756
  {
1796
1757
  "kind": "variable",
1797
- "name": "G"
1758
+ "name": "U"
1798
1759
  },
1799
1760
  {
1800
1761
  "kind": "variable",
1801
- "name": "q"
1762
+ "name": "he"
1802
1763
  },
1803
1764
  {
1804
1765
  "kind": "variable",
1805
- "name": "J"
1766
+ "name": "G"
1806
1767
  },
1807
1768
  {
1808
1769
  "kind": "variable",
1809
- "name": "Y"
1770
+ "name": "K"
1810
1771
  },
1811
1772
  {
1812
1773
  "kind": "variable",
1813
- "name": "Z"
1774
+ "name": "J"
1814
1775
  },
1815
1776
  {
1816
1777
  "kind": "variable",
1817
- "name": "De"
1778
+ "name": "Ae"
1818
1779
  },
1819
1780
  {
1820
1781
  "kind": "variable",
1821
- "name": "Oe",
1782
+ "name": "je",
1822
1783
  "type": {
1823
1784
  "text": "number"
1824
1785
  },
@@ -1826,23 +1787,23 @@
1826
1787
  },
1827
1788
  {
1828
1789
  "kind": "variable",
1829
- "name": "Ae"
1790
+ "name": "X"
1830
1791
  },
1831
1792
  {
1832
1793
  "kind": "variable",
1833
- "name": "je"
1794
+ "name": "Me"
1834
1795
  },
1835
1796
  {
1836
1797
  "kind": "variable",
1837
- "name": "Q"
1798
+ "name": "Z"
1838
1799
  },
1839
1800
  {
1840
1801
  "kind": "variable",
1841
- "name": "$"
1802
+ "name": "Q"
1842
1803
  },
1843
1804
  {
1844
1805
  "kind": "variable",
1845
- "name": "Me"
1806
+ "name": "$"
1846
1807
  },
1847
1808
  {
1848
1809
  "kind": "variable",
@@ -1920,7 +1881,7 @@
1920
1881
  },
1921
1882
  {
1922
1883
  "kind": "function",
1923
- "name": "W",
1884
+ "name": "he",
1924
1885
  "parameters": [
1925
1886
  {
1926
1887
  "name": "e"
@@ -1945,22 +1906,19 @@
1945
1906
  },
1946
1907
  {
1947
1908
  "kind": "function",
1948
- "name": "G",
1909
+ "name": "ve",
1949
1910
  "parameters": [
1950
1911
  {
1951
1912
  "name": "e"
1952
1913
  },
1953
1914
  {
1954
1915
  "name": "t"
1955
- },
1956
- {
1957
- "name": "n"
1958
1916
  }
1959
1917
  ]
1960
1918
  },
1961
1919
  {
1962
1920
  "kind": "function",
1963
- "name": "ge",
1921
+ "name": "ye",
1964
1922
  "parameters": [
1965
1923
  {
1966
1924
  "name": "e"
@@ -1970,16 +1928,6 @@
1970
1928
  }
1971
1929
  ]
1972
1930
  },
1973
- {
1974
- "kind": "function",
1975
- "name": "K",
1976
- "parameters": [
1977
- {
1978
- "name": "e",
1979
- "default": "{}"
1980
- }
1981
- ]
1982
- },
1983
1931
  {
1984
1932
  "kind": "function",
1985
1933
  "name": "p"
@@ -1990,11 +1938,16 @@
1990
1938
  },
1991
1939
  {
1992
1940
  "kind": "function",
1993
- "name": "b"
1941
+ "name": "_"
1994
1942
  },
1995
1943
  {
1996
1944
  "kind": "function",
1997
1945
  "name": "S"
1946
+ },
1947
+ {
1948
+ "kind": "variable",
1949
+ "name": "W",
1950
+ "default": "class extends r{static{this.styles=[c,Se]}#e=0;get autoplay(){return this.#e}set autoplay(e){this.#e=e}#t;get autoplayOptions(){return this.#t}set autoplayOptions(e){this.#t=e}#n=`x`;get axis(){return this.#n}set axis(e){this.#n=e}#r=`start`;get align(){return this.#r}set align(e){this.#r=e}#i={};get breakpoints(){return this.#i}set breakpoints(e){this.#i=e}#a=!1;get loop(){return this.#a}set loop(e){this.#a=e}#o=!1;get dragFree(){return this.#o}set dragFree(e){this.#o=e}#s=20;get duration(){return this.#s}set duration(e){this.#s=e}#c=!1;get skipSnaps(){return this.#c}set skipSnaps(e){this.#c=e}#l=1;get slidesToScroll(){return this.#l}set slidesToScroll(e){this.#l=e}#u=0;get startIndex(){return this.#u}set startIndex(e){this.#u=e}#d=`trimSnaps`;get containScroll(){return this.#d}set containScroll(e){this.#d=e}#f=!1;get single(){return this.#f}set single(e){this.#f=e}#p=!1;get withDots(){return this.#p}set withDots(e){this.#p=e}#m=!1;get withScrollbar(){return this.#m}set withScrollbar(e){this.#m=e}#h=!1;get withFullscreen(){return this.#h}set withFullscreen(e){this.#h=e}#g=`bar`;get dotAppearance(){return this.#g}set dotAppearance(e){this.#g=e}#_=0;get maxVisibleDots(){return this.#_}set maxVisibleDots(e){this.#_=e}#v=`inside`;get scrollButtonsPosition(){return this.#v}set scrollButtonsPosition(e){this.#v=e}#y=0;get _selectedSnap(){return this.#y}set _selectedSnap(e){this.#y=e}constructor(){super(),this.next=this.next.bind(this),this.previous=this.previous.bind(this),this.onInit=this.onInit.bind(this),this.onReInit=this.onReInit.bind(this),this.onResize=this.onResize.bind(this),this.onSelect=this.onSelect.bind(this),this.onSlidesInView=this.onSlidesInView.bind(this),this.detachEventListeners=this.detachEventListeners.bind(this)}connectedCallback(){super.connectedCallback(),this.createEmbla()}disconnectedCallback(){super.disconnectedCallback(),this.embla&&this.embla.destroy()}firstUpdated(){this.attachEventListeners()}createEmbla(){this.embla=ge(this,this.options()),this.embla.on(`init`,this.onInit).on(`reInit`,this.onReInit).on(`resize`,this.onResize).on(`slidesInView`,this.onSlidesInView).on(`select`,this.onSelect).on(`destroy`,this.detachEventListeners)}onSlidesInView(){this.emit(`slides-in-view`,{detail:{indexes:this.embla.slidesInView()}})}onInit(){this.updateNavigation()}onReInit(){this.updateNavigation(),this.requestUpdate()}onSelect(){this.emit(`select`,{detail:{index:this.embla.selectedScrollSnap()}}),this.updateNavigation()}onResize(){this.requestUpdate()}attachEventListeners(){this.previousBtn.addEventListener(`click`,this.previous),this.nextBtn.addEventListener(`click`,this.next)}detachEventListeners(){this.previousBtn.removeEventListener(`click`,this.previous),this.nextBtn.removeEventListener(`click`,this.next)}updateNavigation(){let e=this.embla.canScrollPrev()||this.embla.canScrollNext();this.previousBtn.toggleAttribute(`disabled`,!this.embla.canScrollPrev()),this.nextBtn.toggleAttribute(`disabled`,!this.embla.canScrollNext()),this.scrollButtons.classList.toggle(`scroll-buttons--disabled`,!e),this._selectedSnap=this.embla.selectedScrollSnap()}async updated(e){e.has(`autoplay`)&&this.autoplay&&this.initAutoplay()}initAutoplay(){this.embla.reInit(this.options(),[be(this.autoplayOptions||{delay:this.autoplay})])}handleSlotChange(e){e.target.assignedElements().length>0&&this.embla.reInit(this.options())}handleDotClick(e){let t=e.currentTarget;this.goToSlide(Number(t.dataset.index))}options(){let e=this.shadowRoot.querySelector(`slot`);return e?{container:e,slides:e.assignedElements(),containScroll:this.containScroll,breakpoints:this.breakpoints,axis:this.axis,align:this.align,dragFree:this.dragFree,duration:this.duration,loop:this.loop,slidesToScroll:this.slidesToScroll,skipSnaps:this.skipSnaps,startIndex:this.startIndex}:{container:this,slides:[]}}next(){this.embla.scrollNext()}previous(){this.embla.scrollPrev()}goToSlide(e,t){this.embla.scrollTo(e,t)}slideNodes(){this.embla.slideNodes()}slidesInView(){this.embla.slidesInView()}isActive(){return this.embla?.internalEngine().options.active}renderFullscreenButton(){return t`<button type=\"button\" part=\"button button-fullscreen\" class=\"button button-fullscreen\" @click=${()=>this.emit(`fullscreen`)} > <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\" fill=\"currentColor\" part=\"button-icon button-icon-fullscreen\" > <path d=\"M295 183c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l135-135 0 86.1c0 13.3 10.7 24 24 24s24-10.7 24-24l0-144c0-13.3-10.7-24-24-24L344 0c-13.3 0-24 10.7-24 24s10.7 24 24 24l86.1 0-135 135zM217 329c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0L48 430.1 48 344c0-13.3-10.7-24-24-24S0 330.7 0 344L0 488c0 13.3 10.7 24 24 24l144 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-86.1 0 135-135z\" /> </svg> </button>`}renderNextPreviousButtons(){return t`<div class=\"scroll-buttons scroll-buttons--${this.scrollButtonsPosition}\" part=\"scroll-buttons\" > <button part=\"button button-previous\" class=\"button button-previous\" type=\"button\" > <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\" fill=\"currentColor\" part=\"button-icon button-icon-previous\" > <path d=\"M7 239c-9.4 9.4-9.4 24.6 0 33.9L175 441c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9L81.9 280 488 280c13.3 0 24-10.7 24-24s-10.7-24-24-24L81.9 232 209 105c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0L7 239z\" /> </svg> </button> <button part=\"button button-next\" class=\"button button-next\" type=\"button\" > <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\" fill=\"currentColor\" part=\"button-icon button-icon-next\" > <path d=\"M505 273c9.4-9.4 9.4-24.6 0-33.9L337 71c-9.4-9.4-24.6-9.4-33.9 0s-9.4 24.6 0 33.9l127 127-406.1 0c-13.3 0-24 10.7-24 24s10.7 24 24 24l406.1 0-127 127c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0L505 273z\" /> </svg> </button> </div>`}renderDots(){if(!this.embla)return n;let e=this.embla.scrollSnapList(),r=e.length;if(r===0)return n;let i=this._selectedSnap,a=this.maxVisibleDots,o=0,s=r;if(a>0&&a<r){let e=Math.floor((a-1)/2);o=Math.max(0,i-e),s=Math.min(r,o+a),s-o<a&&(o=Math.max(0,s-a))}let c=o>0,l=s<r;return t`<div class=\"dots\" part=\"dots\" role=\"tablist\" > ${xe(e.slice(o,s),(e,r)=>{let a=o+r,u=r===0,d=r===s-o-1,f=a===i,p=!f&&(u&&c||d&&l);return t`<button part=\"button-dot\" type=\"button\" role=\"tab\" class=\"dot dot--${this.dotAppearance} ${f?`dot--selected`:``}\" aria-label=\"Go to slide ${a+1}\" aria-selected=${f?`true`:n} data-index=\"${a}\" data-edge=${p?``:n} @click=${this.handleDotClick} > <i></i> </button>`})} </div>`}render(){return t` <div class=\"wrapper ${this.isActive()?``:`inactive`}\"> <div part=\"viewport\" class=\"viewport\" > <slot part=\"container\" class=\"container\" @slotchange=${this.handleSlotChange} ></slot> </div> ${this.withFullscreen?this.renderFullscreenButton():``} ${this.renderNextPreviousButtons()} ${this.withDots?this.renderDots():``} </div> `}}"
1998
1951
  }
1999
1952
  ],
2000
1953
  "exports": [
@@ -2002,7 +1955,7 @@
2002
1955
  "kind": "js",
2003
1956
  "name": "LuxenCarousel",
2004
1957
  "declaration": {
2005
- "name": "q",
1958
+ "name": "W",
2006
1959
  "module": "cdn/elements/carousel/carousel.js"
2007
1960
  }
2008
1961
  }
@@ -2149,7 +2102,7 @@
2149
2102
  {
2150
2103
  "kind": "variable",
2151
2104
  "name": "l",
2152
- "default": "class extends r{constructor(...t){super(...t),this._floating=new s(this,{getTriggerElement:()=>this._triggerEl,getFloatingElement:()=>this._panelEl,getArrowElement:()=>null}),this._typeaheadBuffer=``,this._typeaheadTimeout=0,this.#e=!1,this.#t=`bottom-start`,this.#n=4,this.#r=!1,this._onTriggerClick=()=>{this.disabled||this.toggle()},this._onTriggerKeyDown=e=>{this.disabled||(e.key===`ArrowDown`?(e.preventDefault(),this.show(),requestAnimationFrame(()=>this._focusFirstItem())):e.key===`ArrowUp`&&(e.preventDefault(),this.show(),requestAnimationFrame(()=>this._focusLastItem())))},this._onPanelKeyDown=e=>{switch(e.key){case`ArrowDown`:e.preventDefault(),this._focusNextItem();break;case`ArrowUp`:e.preventDefault(),this._focusPreviousItem();break;case`Home`:e.preventDefault(),this._focusFirstItem();break;case`End`:e.preventDefault(),this._focusLastItem();break;case`Escape`:e.preventDefault(),this.hide(),this._triggerEl?.focus();break;case`Enter`:case` `:e.preventDefault(),this._selectCurrentItem();break;default:e.key.length===1&&!e.ctrlKey&&!e.metaKey&&this._handleTypeahead(e.key)}},this._onItemClick=t=>{let n=t.target.closest(e(`dropdown-item`));n&&!n.disabled&&this._selectItem(n)},this._onToggle=e=>{e.newState===`closed`&&this.open&&(this.open=!1,this._triggerEl?.setAttribute(`aria-expanded`,`false`))}}static{this.styles=[o,c]}#e;get open(){return this.#e}set open(e){this.#e=e}#t;get placement(){return this.#t}set placement(e){this.#t=e}#n;get distance(){return this.#n}set distance(e){this.#n=e}#r;get disabled(){return this.#r}set disabled(e){this.#r=e}get _triggerEl(){return this.shadowRoot.querySelector(`.trigger slot`)?.assignedElements()[0]??null}get _panelEl(){return this.shadowRoot.querySelector(`[popover]`)}_getItems(){let t=this.shadowRoot.querySelector(`slot:not([name])`);return t?t.assignedElements().filter(t=>t.tagName===e(`dropdown-item`).toUpperCase()&&!t.disabled):[]}_getAllItems(){let t=this.shadowRoot.querySelector(`slot:not([name])`);return t?t.assignedElements().filter(t=>t.tagName===e(`dropdown-item`).toUpperCase()):[]}_getDuration(e){let t=parseFloat(getComputedStyle(this).getPropertyValue(e));return Number.isNaN(t)?150:t}show(){this.open||this.disabled||this.emit(`show`,{cancelable:!0})&&(this.open=!0)}hide(){this.open&&this.emit(`hide`,{cancelable:!0})&&(this.open=!1)}toggle(){this.open?this.hide():this.show()}updated(e){e.has(`open`)&&this._handleOpenChange()}async _handleOpenChange(){let e=this._panelEl;if(!e)return;let t={placement:this.placement,distance:this.distance};if(this.open){if(e.showPopover(),await this._floating.updatePosition(t),!this.open)return;await this._floating.animateShow(e,this._getDuration(`--show-duration`)),this._floating.startPositioning(t),this._triggerEl?.setAttribute(`aria-expanded`,`true`),this.emit(`after-show`)}else this._floating.stopPositioning(),this._triggerEl?.setAttribute(`aria-expanded`,`false`),await this._floating.animateHide(e,this._getDuration(`--hide-duration`)),e.matches(`:popover-open`)&&e.hidePopover(),this.emit(`after-hide`)}_setActiveItem(e){let t=e.shadowRoot.querySelector(`.item`);if(t){for(let e of this._getAllItems())e.shadowRoot.querySelector(`.item`)?.setAttribute(`tabindex`,`-1`);t.setAttribute(`tabindex`,`0`),t.focus()}}_focusFirstItem(){let e=this._getItems();e.length&&this._setActiveItem(e[0])}_focusLastItem(){let e=this._getItems();e.length&&this._setActiveItem(e[e.length-1])}_getCurrentItem(){return this._getItems().find(e=>{let t=e.shadowRoot.querySelector(`.item`);return t?.getAttribute(`tabindex`)===`0`&&e.shadowRoot.activeElement===t})??null}_focusNextItem(){let e=this._getItems(),t=this._getCurrentItem(),n=e[((t?e.indexOf(t):-1)+1)%e.length];n&&this._setActiveItem(n)}_focusPreviousItem(){let e=this._getItems(),t=this._getCurrentItem(),n=e[((t?e.indexOf(t):0)-1+e.length)%e.length];n&&this._setActiveItem(n)}_handleTypeahead(e){clearTimeout(this._typeaheadTimeout),this._typeaheadBuffer+=e.toLowerCase(),this._typeaheadTimeout=window.setTimeout(()=>{this._typeaheadBuffer=``},500);let t=this._getItems().find(e=>e.getTextLabel().toLowerCase().startsWith(this._typeaheadBuffer));t&&this._setActiveItem(t)}_selectCurrentItem(){let e=this._getCurrentItem();e&&this._selectItem(e)}_selectItem(e){e.type===`checkbox`&&(e.checked=!e.checked),this.emit(`select`,{detail:{item:e}}),e.type!==`checkbox`&&(this.hide(),this._triggerEl?.focus())}render(){return n` <div class=\"trigger\" @click=${this._onTriggerClick} @keydown=${this._onTriggerKeyDown} > <slot name=\"trigger\"></slot> </div> <div popover=\"auto\" part=\"panel\" role=\"menu\" @keydown=${this._onPanelKeyDown} @click=${this._onItemClick} @toggle=${this._onToggle} > <slot></slot> </div> `}}"
2105
+ "default": "class extends r{constructor(...t){super(...t),this._floating=new s(this,{getTriggerElement:()=>this._triggerEl,getFloatingElement:()=>this._panelEl,getArrowElement:()=>null}),this._typeaheadBuffer=``,this._typeaheadTimeout=0,this.#e=!1,this.#t=`bottom-start`,this.#n=4,this.#r=!1,this._onTriggerClick=e=>{this.disabled||(this.toggle(),this.open&&e.detail===0&&requestAnimationFrame(()=>this._focusFirstItem()))},this._onTriggerKeyDown=e=>{this.disabled||(e.key===`ArrowDown`?(e.preventDefault(),this.show(),requestAnimationFrame(()=>this._focusFirstItem())):e.key===`ArrowUp`&&(e.preventDefault(),this.show(),requestAnimationFrame(()=>this._focusLastItem())))},this._onPanelKeyDown=e=>{switch(e.key){case`ArrowDown`:e.preventDefault(),this._focusNextItem();break;case`ArrowUp`:e.preventDefault(),this._focusPreviousItem();break;case`Home`:e.preventDefault(),this._focusFirstItem();break;case`End`:e.preventDefault(),this._focusLastItem();break;case`Escape`:e.preventDefault(),this.hide(),this._triggerEl?.focus();break;case`Enter`:case` `:e.preventDefault(),this._selectCurrentItem();break;default:e.key.length===1&&!e.ctrlKey&&!e.metaKey&&this._handleTypeahead(e.key)}},this._onItemClick=t=>{let n=t.target.closest(e(`dropdown-item`));n&&!n.disabled&&this._selectItem(n)},this._onToggle=e=>{e.newState===`closed`&&this.open&&(this.open=!1,this._triggerEl?.setAttribute(`aria-expanded`,`false`))}}static{this.styles=[o,c]}#e;get open(){return this.#e}set open(e){this.#e=e}#t;get placement(){return this.#t}set placement(e){this.#t=e}#n;get distance(){return this.#n}set distance(e){this.#n=e}#r;get disabled(){return this.#r}set disabled(e){this.#r=e}get _triggerEl(){return this.shadowRoot.querySelector(`.trigger slot`)?.assignedElements()[0]??null}get _panelEl(){return this.shadowRoot.querySelector(`[popover]`)}_getItems(){let t=this.shadowRoot.querySelector(`slot:not([name])`);return t?t.assignedElements().filter(t=>t.tagName===e(`dropdown-item`).toUpperCase()&&!t.disabled):[]}_getAllItems(){let t=this.shadowRoot.querySelector(`slot:not([name])`);return t?t.assignedElements().filter(t=>t.tagName===e(`dropdown-item`).toUpperCase()):[]}_getDuration(e){let t=parseFloat(getComputedStyle(this).getPropertyValue(e));return Number.isNaN(t)?150:t}show(){this.open||this.disabled||this.emit(`show`,{cancelable:!0})&&(this.open=!0)}hide(){this.open&&this.emit(`hide`,{cancelable:!0})&&(this.open=!1)}toggle(){this.open?this.hide():this.show()}updated(e){e.has(`open`)&&this._handleOpenChange()}async _handleOpenChange(){let e=this._panelEl;if(!e)return;let t={placement:this.placement,distance:this.distance};if(this.open){if(e.showPopover(),await this._floating.updatePosition(t),!this.open)return;await this._floating.animateShow(e,this._getDuration(`--show-duration`)),this._floating.startPositioning(t),this._triggerEl?.setAttribute(`aria-expanded`,`true`),this.emit(`after-show`)}else this._floating.stopPositioning(),this._triggerEl?.setAttribute(`aria-expanded`,`false`),await this._floating.animateHide(e,this._getDuration(`--hide-duration`)),e.matches(`:popover-open`)&&e.hidePopover(),this.emit(`after-hide`)}_setActiveItem(e){let t=e.shadowRoot.querySelector(`.item`);if(t){for(let e of this._getAllItems())e.shadowRoot.querySelector(`.item`)?.setAttribute(`tabindex`,`-1`);t.setAttribute(`tabindex`,`0`),t.focus()}}_focusFirstItem(){let e=this._getItems();e.length&&this._setActiveItem(e[0])}_focusLastItem(){let e=this._getItems();e.length&&this._setActiveItem(e[e.length-1])}_getCurrentItem(){return this._getItems().find(e=>{let t=e.shadowRoot.querySelector(`.item`);return t?.getAttribute(`tabindex`)===`0`&&e.shadowRoot.activeElement===t})??null}_focusNextItem(){let e=this._getItems(),t=this._getCurrentItem(),n=e[((t?e.indexOf(t):-1)+1)%e.length];n&&this._setActiveItem(n)}_focusPreviousItem(){let e=this._getItems(),t=this._getCurrentItem(),n=e[((t?e.indexOf(t):0)-1+e.length)%e.length];n&&this._setActiveItem(n)}_handleTypeahead(e){clearTimeout(this._typeaheadTimeout),this._typeaheadBuffer+=e.toLowerCase(),this._typeaheadTimeout=window.setTimeout(()=>{this._typeaheadBuffer=``},500);let t=this._getItems().find(e=>e.getTextLabel().toLowerCase().startsWith(this._typeaheadBuffer));t&&this._setActiveItem(t)}_selectCurrentItem(){let e=this._getCurrentItem();e&&this._selectItem(e)}_selectItem(e){e.type===`checkbox`&&(e.checked=!e.checked),this.emit(`select`,{detail:{item:e}}),e.type!==`checkbox`&&(this.hide(),this._triggerEl?.focus())}render(){return n` <div class=\"trigger\" @click=${this._onTriggerClick} @keydown=${this._onTriggerKeyDown} > <slot name=\"trigger\"></slot> </div> <div popover=\"auto\" part=\"panel\" @keydown=${this._onPanelKeyDown} @click=${this._onItemClick} @toggle=${this._onToggle} > <slot name=\"header\"></slot> <div role=\"menu\"> <slot></slot> </div> <slot name=\"footer\"></slot> </div> `}}"
2153
2106
  }
2154
2107
  ],
2155
2108
  "exports": [
@@ -2240,7 +2193,7 @@
2240
2193
  {
2241
2194
  "kind": "variable",
2242
2195
  "name": "r",
2243
- "default": "class extends e{constructor(...e){super(...e),this._cells=[],this._separatorEl=null,this._initialized=!1,this._updateCells=()=>{let e=this._input.value,t=this._input.maxLength||6,n=Math.min(this._input.selectionStart??0,t-1),r=document.activeElement===this._input;for(let t=0;t<this._cells.length;t++){let i=this._cells[t],a=i.firstElementChild,o=e[t]??``;a.textContent=o,o?i.setAttribute(`data-filled`,``):i.removeAttribute(`data-filled`),r&&t===n?i.setAttribute(`data-active`,``):i.removeAttribute(`data-active`)}},this._clearCells=()=>{for(let e of this._cells)e.removeAttribute(`data-active`)}}createRenderRoot(){return this}connectedCallback(){super.connectedCallback(),requestAnimationFrame(()=>this._setup())}disconnectedCallback(){super.disconnectedCallback(),this._teardown()}_setup(){let e=this.querySelector(`input`);if(!e)return;this._input=e;let t=Number(getComputedStyle(this).getPropertyValue(`--digits`).trim())||6,n={type:`text`,inputmode:`numeric`,autocomplete:`one-time-code`,maxlength:String(t),pattern:String.raw`\\d{${t}}`};for(let[e,t]of Object.entries(n))this._input.hasAttribute(e)||this._input.setAttribute(e,t);this._container=document.createElement(`div`),this._container.className=`l-input-otp-cells`,this._container.setAttribute(`aria-hidden`,`true`);for(let e=0;e<t;e++){let n=document.createElement(`div`);n.className=`l-input-otp-cell`,n.appendChild(document.createElement(`span`)),this._cells.push(n),this._container.appendChild(n),this.separatorAfter&&e===this.separatorAfter-1&&e<t-1&&(this._separatorEl=document.createElement(`span`),this._separatorEl.className=`l-input-otp-separator`,this._container.appendChild(this._separatorEl))}this._input.replaceWith(this._container),this._container.appendChild(this._input),this._initialized=!0,this._updateCells(),this._input.addEventListener(`input`,this._updateCells),this._input.addEventListener(`click`,this._updateCells),this._input.addEventListener(`keyup`,this._updateCells),this._input.addEventListener(`focus`,this._updateCells),this._input.addEventListener(`blur`,this._clearCells)}_teardown(){this._initialized&&=(this._input.removeEventListener(`input`,this._updateCells),this._input.removeEventListener(`click`,this._updateCells),this._input.removeEventListener(`keyup`,this._updateCells),this._input.removeEventListener(`focus`,this._updateCells),this._input.removeEventListener(`blur`,this._clearCells),this._container.replaceWith(this._input),this._separatorEl?.remove(),this._cells=[],this._separatorEl=null,!1)}}"
2196
+ "default": "class extends e{constructor(...e){super(...e),this._cells=[],this._separatorEl=null,this._initialized=!1,this._updateCells=()=>{let e=this._input.value,t=this._input.maxLength||6,n=Math.min(this._input.selectionStart??0,t-1),r=document.activeElement===this._input;for(let t=0;t<this._cells.length;t++){let i=this._cells[t],a=i.firstElementChild,o=e[t]??``;a.textContent=o,o?i.setAttribute(`data-filled`,``):i.removeAttribute(`data-filled`),r&&t===n?i.setAttribute(`data-active`,``):i.removeAttribute(`data-active`)}},this._clearCells=()=>{for(let e of this._cells)e.removeAttribute(`data-active`)},this._scheduleUpdateCells=()=>{requestAnimationFrame(this._updateCells)}}createRenderRoot(){return this}connectedCallback(){super.connectedCallback(),requestAnimationFrame(()=>this._setup())}disconnectedCallback(){super.disconnectedCallback(),this._teardown()}_setup(){let e=this.querySelector(`input`);if(!e)return;this._input=e;let t=Number(getComputedStyle(this).getPropertyValue(`--digits`).trim())||6,n={type:`text`,inputmode:`numeric`,autocomplete:`one-time-code`,maxlength:String(t),pattern:String.raw`\\d{${t}}`};for(let[e,t]of Object.entries(n))this._input.hasAttribute(e)||this._input.setAttribute(e,t);this._container=document.createElement(`div`),this._container.className=`l-input-otp-cells`,this._container.setAttribute(`aria-hidden`,`true`);for(let e=0;e<t;e++){let n=document.createElement(`div`);n.className=`l-input-otp-cell`,n.appendChild(document.createElement(`span`)),this._cells.push(n),this._container.appendChild(n),this.separatorAfter&&e===this.separatorAfter-1&&e<t-1&&(this._separatorEl=document.createElement(`span`),this._separatorEl.className=`l-input-otp-separator`,this._container.appendChild(this._separatorEl))}this._input.replaceWith(this._container),this._container.appendChild(this._input),this._initialized=!0,this._updateCells(),this._input.addEventListener(`input`,this._updateCells),this._input.addEventListener(`click`,this._updateCells),this._input.addEventListener(`keyup`,this._updateCells),this._input.addEventListener(`focus`,this._scheduleUpdateCells),this._input.addEventListener(`blur`,this._clearCells)}_teardown(){this._initialized&&=(this._input.removeEventListener(`input`,this._updateCells),this._input.removeEventListener(`click`,this._updateCells),this._input.removeEventListener(`keyup`,this._updateCells),this._input.removeEventListener(`focus`,this._scheduleUpdateCells),this._input.removeEventListener(`blur`,this._clearCells),this._container.replaceWith(this._input),this._separatorEl?.remove(),this._cells=[],this._separatorEl=null,!1)}}"
2244
2197
  }
2245
2198
  ],
2246
2199
  "exports": [
@@ -2860,6 +2813,10 @@
2860
2813
  {
2861
2814
  "description": "Margin around dots container.",
2862
2815
  "name": "--dot-margin"
2816
+ },
2817
+ {
2818
+ "description": "Scale factor applied to edge dots that signal more dots exist beyond the visible window (default `0.5`).",
2819
+ "name": "--dot-edge-scale"
2863
2820
  }
2864
2821
  ],
2865
2822
  "cssParts": [
@@ -2985,10 +2942,19 @@
2985
2942
  "kind": "field",
2986
2943
  "name": "dotAppearance"
2987
2944
  },
2945
+ {
2946
+ "kind": "field",
2947
+ "name": "maxVisibleDots",
2948
+ "description": "Maximum number of dots rendered at once. When the snap count exceeds this,\na sliding window keeps the active dot in view and shrinks the edge dot(s)\non the side where dots are hidden. `0` (default) renders all dots."
2949
+ },
2988
2950
  {
2989
2951
  "kind": "field",
2990
2952
  "name": "scrollButtonsPosition"
2991
2953
  },
2954
+ {
2955
+ "kind": "field",
2956
+ "name": "_selectedSnap"
2957
+ },
2992
2958
  {
2993
2959
  "kind": "method",
2994
2960
  "name": "createEmbla"
@@ -3091,6 +3057,10 @@
3091
3057
  "kind": "method",
3092
3058
  "name": "renderNextPreviousButtons"
3093
3059
  },
3060
+ {
3061
+ "kind": "method",
3062
+ "name": "renderDots"
3063
+ },
3094
3064
  {
3095
3065
  "kind": "method",
3096
3066
  "name": "emit",
@@ -4125,7 +4095,11 @@
4125
4095
  },
4126
4096
  {
4127
4097
  "description": "Panel border radius. Default `8px`.",
4128
- "name": "--radius"
4098
+ "name": "--border-radius"
4099
+ },
4100
+ {
4101
+ "description": "Panel inner padding. Default `0.25rem`. Slotted `<l-divider>` elements bleed by this amount on each side to span the panel edges.",
4102
+ "name": "--padding"
4129
4103
  },
4130
4104
  {
4131
4105
  "description": "Panel box shadow.",
@@ -4152,8 +4126,16 @@
4152
4126
  "name": "trigger"
4153
4127
  },
4154
4128
  {
4155
- "description": "Menu content (`l-dropdown-item` elements).",
4129
+ "description": "Optional content rendered above the menu items (e.g. a user profile row). Use an `<l-divider>` (or `<hr>`) after it to separate from items.",
4130
+ "name": "header"
4131
+ },
4132
+ {
4133
+ "description": "Menu content (`l-dropdown-item` elements). Drop an `<l-divider>` (or `<hr>`) between items to render a section separator.",
4156
4134
  "name": ""
4135
+ },
4136
+ {
4137
+ "description": "Optional content rendered below the menu items (e.g. a version label or shortcut row). Use an `<l-divider>` (or `<hr>`) before it to separate from items.",
4138
+ "name": "footer"
4157
4139
  }
4158
4140
  ],
4159
4141
  "members": [
@@ -4638,11 +4620,31 @@
4638
4620
  },
4639
4621
  {
4640
4622
  "description": "Cell width and height (default: 2.75rem). Font size scales automatically.",
4641
- "name": "--size"
4623
+ "name": "--cell-size"
4642
4624
  },
4643
4625
  {
4644
4626
  "description": "Space between cells (default: 0.5rem).",
4645
- "name": "--gap"
4627
+ "name": "--cell-gap"
4628
+ },
4629
+ {
4630
+ "description": "Cell background color.",
4631
+ "name": "--cell-bg-color"
4632
+ },
4633
+ {
4634
+ "description": "Cell border color.",
4635
+ "name": "--cell-border-color"
4636
+ },
4637
+ {
4638
+ "description": "Cell border-radius.",
4639
+ "name": "--cell-border-radius"
4640
+ },
4641
+ {
4642
+ "description": "Border + ring color of the active (focused) cell.",
4643
+ "name": "--cell-focus-color"
4644
+ },
4645
+ {
4646
+ "description": "`box-shadow` of the active cell ring (defaults to a 1px solid ring; set to `none` to disable).",
4647
+ "name": "--cell-focus-ring"
4646
4648
  }
4647
4649
  ],
4648
4650
  "members": [
@@ -4686,6 +4688,10 @@
4686
4688
  "kind": "field",
4687
4689
  "name": "_clearCells"
4688
4690
  },
4691
+ {
4692
+ "kind": "field",
4693
+ "name": "_scheduleUpdateCells"
4694
+ },
4689
4695
  {
4690
4696
  "kind": "method",
4691
4697
  "name": "emit",
@@ -6528,15 +6534,15 @@
6528
6534
  "cssProperties": [
6529
6535
  {
6530
6536
  "description": "Background color. Default: dark in light mode, light in dark mode.",
6531
- "name": "--background"
6537
+ "name": "--background-color"
6532
6538
  },
6533
6539
  {
6534
- "description": "Text color.",
6535
- "name": "--color"
6540
+ "description": "Text color. If unset, auto-derived from `--background-color` luminance.",
6541
+ "name": "--text-color"
6536
6542
  },
6537
6543
  {
6538
6544
  "description": "Border radius. Default `4px`.",
6539
- "name": "--radius"
6545
+ "name": "--border-radius"
6540
6546
  },
6541
6547
  {
6542
6548
  "description": "Maximum width. Default `180px`.",
@@ -8319,6 +8325,10 @@
8319
8325
  {
8320
8326
  "description": "Margin around dots container.",
8321
8327
  "name": "--dot-margin"
8328
+ },
8329
+ {
8330
+ "description": "Scale factor applied to edge dots that signal more dots exist beyond the visible window (default `0.5`).",
8331
+ "name": "--dot-edge-scale"
8322
8332
  }
8323
8333
  ],
8324
8334
  "cssParts": [
@@ -8537,6 +8547,16 @@
8537
8547
  "default": "'bar'",
8538
8548
  "attribute": "dot-appearance"
8539
8549
  },
8550
+ {
8551
+ "kind": "field",
8552
+ "name": "maxVisibleDots",
8553
+ "type": {
8554
+ "text": "number"
8555
+ },
8556
+ "default": "0",
8557
+ "description": "Maximum number of dots rendered at once. When the snap count exceeds this,\na sliding window keeps the active dot in view and shrinks the edge dot(s)\non the side where dots are hidden. `0` (default) renders all dots.",
8558
+ "attribute": "max-visible-dots"
8559
+ },
8540
8560
  {
8541
8561
  "kind": "field",
8542
8562
  "name": "scrollButtonsPosition",
@@ -8546,6 +8566,15 @@
8546
8566
  "default": "'inside'",
8547
8567
  "attribute": "scroll-buttons-position"
8548
8568
  },
8569
+ {
8570
+ "kind": "field",
8571
+ "name": "_selectedSnap",
8572
+ "type": {
8573
+ "text": "number"
8574
+ },
8575
+ "privacy": "private",
8576
+ "default": "0"
8577
+ },
8549
8578
  {
8550
8579
  "kind": "field",
8551
8580
  "name": "scrollButtons",
@@ -8574,13 +8603,6 @@
8574
8603
  "text": "HTMLSlotElement"
8575
8604
  }
8576
8605
  },
8577
- {
8578
- "kind": "field",
8579
- "name": "dotNodes",
8580
- "type": {
8581
- "text": "HTMLButtonElement[]"
8582
- }
8583
- },
8584
8606
  {
8585
8607
  "kind": "method",
8586
8608
  "name": "createEmbla",
@@ -8713,6 +8735,11 @@
8713
8735
  "kind": "method",
8714
8736
  "name": "renderNextPreviousButtons"
8715
8737
  },
8738
+ {
8739
+ "kind": "method",
8740
+ "name": "renderDots",
8741
+ "privacy": "private"
8742
+ },
8716
8743
  {
8717
8744
  "kind": "method",
8718
8745
  "name": "emit",
@@ -8893,6 +8920,15 @@
8893
8920
  "default": "'bar'",
8894
8921
  "fieldName": "dotAppearance"
8895
8922
  },
8923
+ {
8924
+ "name": "max-visible-dots",
8925
+ "type": {
8926
+ "text": "number"
8927
+ },
8928
+ "default": "0",
8929
+ "description": "Maximum number of dots rendered at once. When the snap count exceeds this,\na sliding window keeps the active dot in view and shrinks the edge dot(s)\non the side where dots are hidden. `0` (default) renders all dots.",
8930
+ "fieldName": "maxVisibleDots"
8931
+ },
8896
8932
  {
8897
8933
  "name": "scroll-buttons-position",
8898
8934
  "type": {
@@ -10034,7 +10070,11 @@
10034
10070
  },
10035
10071
  {
10036
10072
  "description": "Panel border radius. Default `8px`.",
10037
- "name": "--radius"
10073
+ "name": "--border-radius"
10074
+ },
10075
+ {
10076
+ "description": "Panel inner padding. Default `0.25rem`. Slotted `<l-divider>` elements bleed by this amount on each side to span the panel edges.",
10077
+ "name": "--padding"
10038
10078
  },
10039
10079
  {
10040
10080
  "description": "Panel box shadow.",
@@ -10061,8 +10101,16 @@
10061
10101
  "name": "trigger"
10062
10102
  },
10063
10103
  {
10064
- "description": "Menu content (`l-dropdown-item` elements).",
10104
+ "description": "Optional content rendered above the menu items (e.g. a user profile row). Use an `<l-divider>` (or `<hr>`) after it to separate from items.",
10105
+ "name": "header"
10106
+ },
10107
+ {
10108
+ "description": "Menu content (`l-dropdown-item` elements). Drop an `<l-divider>` (or `<hr>`) between items to render a section separator.",
10065
10109
  "name": ""
10110
+ },
10111
+ {
10112
+ "description": "Optional content rendered below the menu items (e.g. a version label or shortcut row). Use an `<l-divider>` (or `<hr>`) before it to separate from items.",
10113
+ "name": "footer"
10066
10114
  }
10067
10115
  ],
10068
10116
  "members": [
@@ -10762,11 +10810,31 @@
10762
10810
  },
10763
10811
  {
10764
10812
  "description": "Cell width and height (default: 2.75rem). Font size scales automatically.",
10765
- "name": "--size"
10813
+ "name": "--cell-size"
10766
10814
  },
10767
10815
  {
10768
10816
  "description": "Space between cells (default: 0.5rem).",
10769
- "name": "--gap"
10817
+ "name": "--cell-gap"
10818
+ },
10819
+ {
10820
+ "description": "Cell background color.",
10821
+ "name": "--cell-bg-color"
10822
+ },
10823
+ {
10824
+ "description": "Cell border color.",
10825
+ "name": "--cell-border-color"
10826
+ },
10827
+ {
10828
+ "description": "Cell border-radius.",
10829
+ "name": "--cell-border-radius"
10830
+ },
10831
+ {
10832
+ "description": "Border + ring color of the active (focused) cell.",
10833
+ "name": "--cell-focus-color"
10834
+ },
10835
+ {
10836
+ "description": "`box-shadow` of the active cell ring (defaults to a 1px solid ring; set to `none` to disable).",
10837
+ "name": "--cell-focus-ring"
10770
10838
  }
10771
10839
  ],
10772
10840
  "members": [
@@ -10843,6 +10911,11 @@
10843
10911
  "name": "_clearCells",
10844
10912
  "privacy": "private"
10845
10913
  },
10914
+ {
10915
+ "kind": "field",
10916
+ "name": "_scheduleUpdateCells",
10917
+ "privacy": "private"
10918
+ },
10846
10919
  {
10847
10920
  "kind": "method",
10848
10921
  "name": "emit",
@@ -13195,15 +13268,15 @@
13195
13268
  "cssProperties": [
13196
13269
  {
13197
13270
  "description": "Background color. Default: dark in light mode, light in dark mode.",
13198
- "name": "--background"
13271
+ "name": "--background-color"
13199
13272
  },
13200
13273
  {
13201
- "description": "Text color.",
13202
- "name": "--color"
13274
+ "description": "Text color. If unset, auto-derived from `--background-color` luminance.",
13275
+ "name": "--text-color"
13203
13276
  },
13204
13277
  {
13205
13278
  "description": "Border radius. Default `4px`.",
13206
- "name": "--radius"
13279
+ "name": "--border-radius"
13207
13280
  },
13208
13281
  {
13209
13282
  "description": "Maximum width. Default `180px`.",