luxen-ui 0.3.0 → 0.4.0

package/dist/custom-elements.json

@@ -532,16 +532,7 @@
         },
         {
           "kind": "function",
-          "name": "l",
-          "parameters": [
-            {
-              "name": "e"
-            }
-          ]
-        },
-        {
-          "kind": "function",
-          "name": "u",
+          "name": "c",
           "parameters": [
             {
               "name": "e"
@@ -559,19 +550,11 @@
         }
       ],
       "exports": [
-        {
-          "kind": "js",
-          "name": "a",
-          "declaration": {
-            "name": "i",
-            "module": "cdn/chunks/decorate.js"
-          }
-        },
         {
           "kind": "js",
           "name": "i",
           "declaration": {
-            "name": "a",
+            "name": "i",
             "module": "cdn/chunks/decorate.js"
           }
         },
@@ -579,7 +562,7 @@
           "kind": "js",
           "name": "n",
           "declaration": {
-            "name": "l",
+            "name": "s",
             "module": "cdn/chunks/decorate.js"
           }
         },
@@ -587,7 +570,7 @@
           "kind": "js",
           "name": "r",
           "declaration": {
-            "name": "s",
+            "name": "a",
             "module": "cdn/chunks/decorate.js"
           }
         },
@@ -595,7 +578,7 @@
           "kind": "js",
           "name": "t",
           "declaration": {
-            "name": "u",
+            "name": "c",
             "module": "cdn/chunks/decorate.js"
           }
         }
@@ -1446,21 +1429,15 @@
           "parameters": [
             {
               "name": "e"
-            },
-            {
-              "name": "t"
             }
           ]
         },
         {
           "kind": "function",
-          "name": "b",
+          "name": "_",
           "parameters": [
             {
               "name": "e"
-            },
-            {
-              "name": "t"
             }
           ]
         },
@@ -1470,6 +1447,10 @@
           "parameters": [
             {
               "name": "e"
+            },
+            {
+              "name": "t",
+              "default": "0"
             }
           ]
         },
@@ -1628,11 +1609,7 @@
         },
         {
           "kind": "function",
-          "name": "m"
-        },
-        {
-          "kind": "function",
-          "name": "b"
+          "name": "_"
         },
         {
           "kind": "function",
@@ -1652,26 +1629,10 @@
             }
           ]
         },
-        {
-          "kind": "function",
-          "name": "p"
-        },
         {
           "kind": "function",
           "name": "m"
         },
-        {
-          "kind": "function",
-          "name": "m",
-          "parameters": [
-            {
-              "name": "n"
-            },
-            {
-              "name": "r"
-            }
-          ]
-        },
         {
           "kind": "function",
           "name": "m",
@@ -1756,7 +1717,7 @@
         },
         {
           "kind": "function",
-          "name": "b"
+          "name": "_"
         },
         {
           "kind": "function",
@@ -1777,7 +1738,11 @@
         },
         {
           "kind": "function",
-          "name": "b",
+          "name": "_"
+        },
+        {
+          "kind": "function",
+          "name": "_",
           "parameters": [
             {
               "name": "e"
@@ -1786,39 +1751,35 @@
         },
         {
           "kind": "variable",
-          "name": "U"
-        },
-        {
-          "kind": "variable",
-          "name": "W"
+          "name": "H"
         },
         {
           "kind": "variable",
-          "name": "G"
+          "name": "U"
         },
         {
           "kind": "variable",
-          "name": "q"
+          "name": "he"
         },
         {
           "kind": "variable",
-          "name": "J"
+          "name": "G"
         },
         {
           "kind": "variable",
-          "name": "Y"
+          "name": "K"
         },
         {
           "kind": "variable",
-          "name": "Z"
+          "name": "J"
         },
         {
           "kind": "variable",
-          "name": "De"
+          "name": "Ae"
         },
         {
           "kind": "variable",
-          "name": "Oe",
+          "name": "je",
           "type": {
             "text": "number"
           },
@@ -1826,23 +1787,23 @@
         },
         {
           "kind": "variable",
-          "name": "Ae"
+          "name": "X"
         },
         {
           "kind": "variable",
-          "name": "je"
+          "name": "Me"
         },
         {
           "kind": "variable",
-          "name": "Q"
+          "name": "Z"
         },
         {
           "kind": "variable",
-          "name": "$"
+          "name": "Q"
         },
         {
           "kind": "variable",
-          "name": "Me"
+          "name": "$"
         },
         {
           "kind": "variable",
@@ -1920,7 +1881,7 @@
         },
         {
           "kind": "function",
-          "name": "W",
+          "name": "he",
           "parameters": [
             {
               "name": "e"
@@ -1945,22 +1906,19 @@
         },
         {
           "kind": "function",
-          "name": "G",
+          "name": "ve",
           "parameters": [
             {
               "name": "e"
             },
             {
               "name": "t"
-            },
-            {
-              "name": "n"
             }
           ]
         },
         {
           "kind": "function",
-          "name": "ge",
+          "name": "ye",
           "parameters": [
             {
               "name": "e"
@@ -1970,16 +1928,6 @@
             }
           ]
         },
-        {
-          "kind": "function",
-          "name": "K",
-          "parameters": [
-            {
-              "name": "e",
-              "default": "{}"
-            }
-          ]
-        },
         {
           "kind": "function",
           "name": "p"
@@ -1990,11 +1938,16 @@
         },
         {
           "kind": "function",
-          "name": "b"
+          "name": "_"
         },
         {
           "kind": "function",
           "name": "S"
+        },
+        {
+          "kind": "variable",
+          "name": "W",
+          "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> `}}"
         }
       ],
       "exports": [
@@ -2002,7 +1955,7 @@
           "kind": "js",
           "name": "LuxenCarousel",
           "declaration": {
-            "name": "q",
+            "name": "W",
             "module": "cdn/elements/carousel/carousel.js"
           }
         }
@@ -2149,7 +2102,7 @@
         {
           "kind": "variable",
           "name": "l",
-          "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> `}}"
+          "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> `}}"
         }
       ],
       "exports": [
@@ -2860,6 +2813,10 @@
             {
               "description": "Margin around dots container.",
               "name": "--dot-margin"
+            },
+            {
+              "description": "Scale factor applied to edge dots that signal more dots exist beyond the visible window (default `0.5`).",
+              "name": "--dot-edge-scale"
             }
           ],
           "cssParts": [
@@ -2985,10 +2942,19 @@
               "kind": "field",
               "name": "dotAppearance"
             },
+            {
+              "kind": "field",
+              "name": "maxVisibleDots",
+              "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."
+            },
             {
               "kind": "field",
               "name": "scrollButtonsPosition"
             },
+            {
+              "kind": "field",
+              "name": "_selectedSnap"
+            },
             {
               "kind": "method",
               "name": "createEmbla"
@@ -3091,6 +3057,10 @@
               "kind": "method",
               "name": "renderNextPreviousButtons"
             },
+            {
+              "kind": "method",
+              "name": "renderDots"
+            },
             {
               "kind": "method",
               "name": "emit",
@@ -4125,7 +4095,11 @@
             },
             {
               "description": "Panel border radius. Default `8px`.",
-              "name": "--radius"
+              "name": "--border-radius"
+            },
+            {
+              "description": "Panel inner padding. Default `0.25rem`. Slotted `<l-divider>` elements bleed by this amount on each side to span the panel edges.",
+              "name": "--padding"
             },
             {
               "description": "Panel box shadow.",
@@ -4152,8 +4126,16 @@
               "name": "trigger"
             },
             {
-              "description": "Menu content (`l-dropdown-item` elements).",
+              "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.",
+              "name": "header"
+            },
+            {
+              "description": "Menu content (`l-dropdown-item` elements). Drop an `<l-divider>` (or `<hr>`) between items to render a section separator.",
               "name": ""
+            },
+            {
+              "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.",
+              "name": "footer"
             }
           ],
           "members": [
@@ -6552,15 +6534,15 @@
           "cssProperties": [
             {
               "description": "Background color. Default: dark in light mode, light in dark mode.",
-              "name": "--background"
+              "name": "--background-color"
             },
             {
-              "description": "Text color.",
-              "name": "--color"
+              "description": "Text color. If unset, auto-derived from `--background-color` luminance.",
+              "name": "--text-color"
             },
             {
               "description": "Border radius. Default `4px`.",
-              "name": "--radius"
+              "name": "--border-radius"
             },
             {
               "description": "Maximum width. Default `180px`.",
@@ -8343,6 +8325,10 @@
             {
               "description": "Margin around dots container.",
               "name": "--dot-margin"
+            },
+            {
+              "description": "Scale factor applied to edge dots that signal more dots exist beyond the visible window (default `0.5`).",
+              "name": "--dot-edge-scale"
             }
           ],
           "cssParts": [
@@ -8561,6 +8547,16 @@
               "default": "'bar'",
               "attribute": "dot-appearance"
             },
+            {
+              "kind": "field",
+              "name": "maxVisibleDots",
+              "type": {
+                "text": "number"
+              },
+              "default": "0",
+              "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.",
+              "attribute": "max-visible-dots"
+            },
             {
               "kind": "field",
               "name": "scrollButtonsPosition",
@@ -8570,6 +8566,15 @@
               "default": "'inside'",
               "attribute": "scroll-buttons-position"
             },
+            {
+              "kind": "field",
+              "name": "_selectedSnap",
+              "type": {
+                "text": "number"
+              },
+              "privacy": "private",
+              "default": "0"
+            },
             {
               "kind": "field",
               "name": "scrollButtons",
@@ -8598,13 +8603,6 @@
                 "text": "HTMLSlotElement"
               }
             },
-            {
-              "kind": "field",
-              "name": "dotNodes",
-              "type": {
-                "text": "HTMLButtonElement[]"
-              }
-            },
             {
               "kind": "method",
               "name": "createEmbla",
@@ -8737,6 +8735,11 @@
               "kind": "method",
               "name": "renderNextPreviousButtons"
             },
+            {
+              "kind": "method",
+              "name": "renderDots",
+              "privacy": "private"
+            },
             {
               "kind": "method",
               "name": "emit",
@@ -8917,6 +8920,15 @@
               "default": "'bar'",
               "fieldName": "dotAppearance"
             },
+            {
+              "name": "max-visible-dots",
+              "type": {
+                "text": "number"
+              },
+              "default": "0",
+              "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.",
+              "fieldName": "maxVisibleDots"
+            },
             {
               "name": "scroll-buttons-position",
               "type": {
@@ -10058,7 +10070,11 @@
             },
             {
               "description": "Panel border radius. Default `8px`.",
-              "name": "--radius"
+              "name": "--border-radius"
+            },
+            {
+              "description": "Panel inner padding. Default `0.25rem`. Slotted `<l-divider>` elements bleed by this amount on each side to span the panel edges.",
+              "name": "--padding"
             },
             {
               "description": "Panel box shadow.",
@@ -10085,8 +10101,16 @@
               "name": "trigger"
             },
             {
-              "description": "Menu content (`l-dropdown-item` elements).",
+              "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.",
+              "name": "header"
+            },
+            {
+              "description": "Menu content (`l-dropdown-item` elements). Drop an `<l-divider>` (or `<hr>`) between items to render a section separator.",
               "name": ""
+            },
+            {
+              "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.",
+              "name": "footer"
             }
           ],
           "members": [
@@ -13244,15 +13268,15 @@
           "cssProperties": [
             {
               "description": "Background color. Default: dark in light mode, light in dark mode.",
-              "name": "--background"
+              "name": "--background-color"
             },
             {
-              "description": "Text color.",
-              "name": "--color"
+              "description": "Text color. If unset, auto-derived from `--background-color` luminance.",
+              "name": "--text-color"
             },
             {
               "description": "Border radius. Default `4px`.",
-              "name": "--radius"
+              "name": "--border-radius"
             },
             {
               "description": "Maximum width. Default `180px`.",

package/dist/elements/avatar/avatar.css

@@ -93,7 +93,9 @@ img {
   border: none;
   border-radius: calc(var(--_size) * 0.2);
   background-color: var(--color, var(--l-color-bg-fill-neutral-soft));
-  color: oklch(from var(--color) 0.45 calc(c * 2) h);
+  color: oklch(
+    from var(--color) calc(0.65 - 0.2 * sign(l - 0.5)) calc(c * (1.75 + 0.25 * sign(l - 0.5))) h
+  );
   font-size: var(--_font-size);
   font-weight: 500;
   line-height: 1;
@@ -102,6 +104,16 @@ img {
   cursor: inherit;
 }
 
+@supports (color: contrast-color(red vs black, white)) {
+  .base {
+    color: contrast-color(
+      var(--color, var(--l-color-bg-fill-neutral-soft)) vs
+        oklch(from var(--color) 0.45 calc(c * 2) h),
+      oklch(from var(--color) 0.85 calc(c * 1.5) h) to AA
+    );
+  }
+}
+
 button.base {
   cursor: pointer;
 }
@@ -115,12 +127,6 @@ button.base:hover {
   box-shadow: inset 0 0 0 1.5px var(--l-color-border-interactive);
 }
 
-@media (prefers-color-scheme: dark) {
-  .base {
-    color: oklch(from var(--color) 0.85 calc(c * 1.5) h);
-  }
-}
-
 @container style(--appearance: circle) {
   .base {
     border-radius: 50%;

package/dist/elements/carousel/carousel.css

@@ -16,6 +16,7 @@
   --dot-color: #9ca3af;
   --dot-color-active: #111827;
   --dot-margin: 0.5rem 0;
+  --dot-edge-scale: 0.5;
 
   --scrollbar-color: #d1d5db transparent;
 
@@ -180,6 +181,12 @@
   padding-block: 0.5rem;
   border: 0;
   cursor: pointer;
+  transition: transform 180ms ease;
+  transform-origin: center;
+}
+
+.dot[data-edge] {
+  transform: scale(var(--dot-edge-scale));
 }
 
 .dot--bar i {

package/dist/elements/carousel/carousel.d.ts

@@ -33,6 +33,7 @@ import { LuxenElement } from '../../shared/luxen-element';
  * @cssproperty --dot-color - Color of inactive dots.
  * @cssproperty --dot-color-active - Color of active dot.
  * @cssproperty --dot-margin - Margin around dots container.
+ * @cssproperty --dot-edge-scale - Scale factor applied to edge dots that signal more dots exist beyond the visible window (default `0.5`).
  */
 export declare class LuxenCarousel extends LuxenElement {
     static styles: CSSResultGroup;
@@ -110,12 +111,18 @@ export declare class LuxenCarousel extends LuxenElement {
     accessor withScrollbar: boolean;
     accessor withFullscreen: boolean;
     accessor dotAppearance: 'circle' | 'bar';
+    /**
+     * Maximum number of dots rendered at once. When the snap count exceeds this,
+     * a sliding window keeps the active dot in view and shrinks the edge dot(s)
+     * on the side where dots are hidden. `0` (default) renders all dots.
+     */
+    accessor maxVisibleDots: number;
     accessor scrollButtonsPosition: 'inside' | 'outside';
+    private accessor _selectedSnap;
     scrollButtons: HTMLElement;
     previousBtn: HTMLButtonElement;
     nextBtn: HTMLButtonElement;
     container: HTMLSlotElement;
-    dotNodes: HTMLButtonElement[];
     constructor();
     connectedCallback(): void;
     disconnectedCallback(): void;
@@ -142,6 +149,7 @@ export declare class LuxenCarousel extends LuxenElement {
     isActive(): boolean;
     renderFullscreenButton(): import("lit").TemplateResult<1>;
     renderNextPreviousButtons(): import("lit").TemplateResult<1>;
+    private renderDots;
     render(): import("lit").TemplateResult<1>;
 }
 export {};