monobill-mintui 0.4.9 → 0.4.91

package/dist/components/top-navigation/TopNavigation.d.ts

@@ -6,10 +6,15 @@ declare class MintTopNavigation extends HTMLElement {
     private _menuButton;
     private _logoLink;
     private _menuClickHandler;
+    private _themeObserver;
     connectedCallback(): void;
     disconnectedCallback(): void;
     attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
     private _getLogoSrc;
+    private _getLogoSrcLight;
+    private _getLogoSrcDark;
+    private _getResolvedLogoSrc;
+    private _observeTheme;
     private _getLogoHref;
     private _getLogoAlt;
     private _getMenuTargetId;

package/dist/components/top-navigation/TopNavigation.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TopNavigation.d.ts","sourceRoot":"","sources":["../../../src/components/top-navigation/TopNavigation.ts"],"names":[],"mappings":"AACA,OAAO,eAAe,CAAA;AACtB,OAAO,oBAAoB,CAAA;AAE3B,cAAM,iBAAkB,SAAQ,WAAW;IACzC,MAAM,KAAK,kBAAkB,IAAI,MAAM,EAAE,CAExC;IAED,OAAO,CAAC,IAAI,CAA2B;IACvC,OAAO,CAAC,WAAW,CAAiC;IACpD,OAAO,CAAC,SAAS,CAAiC;IAClD,OAAO,CAAC,iBAAiB,CAA4B;IAErD,iBAAiB,IAAI,IAAI;IAKzB,oBAAoB,IAAI,IAAI;IAO5B,wBAAwB,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAG,IAAI,EAAE,QAAQ,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI;IAM9F,OAAO,CAAC,WAAW;IAInB,OAAO,CAAC,YAAY;IAIpB,OAAO,CAAC,WAAW;IAInB,OAAO,CAAC,gBAAgB;IAIxB,OAAO,CAAC,iBAAiB;IAYzB,MAAM,IAAI,IAAI;CAsEf;AAMD,eAAe,iBAAiB,CAAA"}
+{"version":3,"file":"TopNavigation.d.ts","sourceRoot":"","sources":["../../../src/components/top-navigation/TopNavigation.ts"],"names":[],"mappings":"AACA,OAAO,eAAe,CAAA;AACtB,OAAO,oBAAoB,CAAA;AAE3B,cAAM,iBAAkB,SAAQ,WAAW;IACzC,MAAM,KAAK,kBAAkB,IAAI,MAAM,EAAE,CAExC;IAED,OAAO,CAAC,IAAI,CAA2B;IACvC,OAAO,CAAC,WAAW,CAAiC;IACpD,OAAO,CAAC,SAAS,CAAiC;IAClD,OAAO,CAAC,iBAAiB,CAA4B;IACrD,OAAO,CAAC,cAAc,CAAgC;IAEtD,iBAAiB,IAAI,IAAI;IAMzB,oBAAoB,IAAI,IAAI;IAW5B,wBAAwB,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAG,IAAI,EAAE,QAAQ,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI;IAM9F,OAAO,CAAC,WAAW;IAInB,OAAO,CAAC,gBAAgB;IAIxB,OAAO,CAAC,eAAe;IAIvB,OAAO,CAAC,mBAAmB;IAU3B,OAAO,CAAC,aAAa;IASrB,OAAO,CAAC,YAAY;IAIpB,OAAO,CAAC,WAAW;IAInB,OAAO,CAAC,gBAAgB;IAIxB,OAAO,CAAC,iBAAiB;IAYzB,MAAM,IAAI,IAAI;CAsEf;AAMD,eAAe,iBAAiB,CAAA"}

package/dist/index.cjs

@@ -206,4 +206,4 @@ Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{val
         <mint-icon name="plus" class="h-4 w-4"></mint-icon>
         <span class="text-sm">Add team</span>
       </span>
-    `,n.appendChild(r);let i=document.createElement(`div`);return i.appendChild(e),i.appendChild(n),i}render(){let e=Array.from(this.children).filter(e=>e!==this._wrapper&&e.getAttribute(`slot`)===`action-links`);this._wrapper||(this._wrapper=document.createElement(`div`),this._wrapper.className=`relative`,this.appendChild(this._wrapper)),this._wrapper.innerHTML=``,this._trigger=document.createElement(`button`),this._trigger.type=`button`,this._trigger.id=this._triggerId,this._trigger.className=`flex w-full cursor-pointer items-center gap-3 rounded-xl border border-gray-200 bg-gray-50 px-3 py-2 text-left transition-colors hover:bg-gray-100 dark:border-gray-700 dark:bg-gray-800 dark:hover:bg-gray-700`;let t=document.createElement(`div`);t.className=`inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-blue-600 text-xs font-semibold text-white`,t.textContent=this._getTitle().split(` `).map(e=>e[0]).join(``).slice(0,2).toUpperCase();let n=document.createElement(`div`);n.className=`min-w-0 flex-1`;let r=document.createElement(`mint-text`);r.setAttribute(`size`,`body`),r.setAttribute(`bold`,`true`),r.className=`truncate text-gray-900 dark:text-gray-100`,r.textContent=this._getTitle();let i=document.createElement(`mint-text`);i.setAttribute(`size`,`small`),i.setAttribute(`variant`,`muted`),i.className=`truncate`,i.textContent=this._getSubtitle();let a=document.createElement(`div`);a.className=`mint-sidenav-action-menu-caret pointer-events-none z-10 flex flex-col items-center`;let o=document.createElement(`mint-icon`);o.setAttribute(`name`,`caret-up`),o.className=`h-[.9em] w-[.9em] text-gray-400 dark:text-gray-500 mb-[-.2rem]`;let s=document.createElement(`mint-icon`);s.setAttribute(`name`,`caret-down`),s.className=`h-[.9em] w-[.9em] text-gray-400 dark:text-gray-500 mt-[-.2rem]`,a.appendChild(o),a.appendChild(s),n.appendChild(r),n.appendChild(i),this._trigger.appendChild(t),this._trigger.appendChild(n),this._trigger.appendChild(a),this._popover=document.createElement(`mint-popover`),this._popover.setAttribute(`trigger-id`,this._triggerId),this._popover.setAttribute(`direction`,`right`),this._popover.setAttribute(`padding`,`0`);let c=document.createElement(`div`);c.className=`w-64`,e.length>0?e.forEach(e=>{e.setAttribute(`hidden`,`true`);let t=e.cloneNode(!0);t.removeAttribute(`hidden`),t.removeAttribute(`slot`),c.appendChild(t)}):c.appendChild(this._createDefaultGroup()),this._popover.appendChild(c),this._wrapper.appendChild(this._trigger),this._wrapper.appendChild(this._popover)}};customElements.get(`mint-sidenav-action-menu`)||customElements.define(`mint-sidenav-action-menu`,L);var R=class extends HTMLElement{constructor(...e){super(...e),this._backdrop=null,this._container=null,this._header=null,this._content=null,this._footer=null,this._escapeHandler=null,this._mediaQuery=null,this._mediaListener=null}static get observedAttributes(){return[`user-name`,`user-status`,`open`,`drawer-top-class`]}connectedCallback(){this.classList.add(`relative`,`block`,`shrink-0`,`w-0`,`overflow-visible`,`min-[1100px]:w-[17rem]`,`min-[1100px]:shrink-0`),this._attachEscapeListener(),this._attachMediaListener(),this.render()}disconnectedCallback(){this._detachEscapeListener(),this._detachMediaListener()}attributeChangedCallback(e,t,n){t!==n&&this.render()}_attachEscapeListener(){this._escapeHandler||(this._escapeHandler=e=>{e.key===`Escape`&&this.getAttribute(`open`)===`true`&&this.removeAttribute(`open`)},document.addEventListener(`keydown`,this._escapeHandler))}_detachEscapeListener(){this._escapeHandler&&=(document.removeEventListener(`keydown`,this._escapeHandler),null)}_attachMediaListener(){this._mediaListener||(this._mediaQuery=window.matchMedia(`(min-width: 1100px)`),this._mediaListener=()=>{this._mediaQuery?.matches&&this.removeAttribute(`open`)},this._mediaQuery.addEventListener(`change`,this._mediaListener))}_detachMediaListener(){this._mediaQuery&&this._mediaListener&&this._mediaQuery.removeEventListener(`change`,this._mediaListener),this._mediaQuery=null,this._mediaListener=null}getUserName(){return this.getAttribute(`user-name`)||`Acme Inc`}getUserStatus(){return this.getAttribute(`user-status`)||`Enterprise`}_isOpen(){return this.getAttribute(`open`)===`true`}_ensureBackdrop(){this._backdrop||(this._backdrop=document.createElement(`div`),this._backdrop.setAttribute(`aria-hidden`,`true`),this._backdrop.addEventListener(`click`,()=>this.removeAttribute(`open`)),this.insertBefore(this._backdrop,this.firstChild))}_ensureContainer(){this._container||(this._container=document.createElement(`aside`),this.appendChild(this._container))}_syncShell(){let e=`max-[1099.98px]:top-14`,t=this._isOpen();if(this._backdrop&&(this._backdrop.className=[`fixed`,e,`left-0`,`right-0`,`bottom-0`,`z-40`,`bg-black/50`,`transition-opacity`,`duration-200`,`min-[1100px]:hidden`,t?`pointer-events-auto opacity-100`:`pointer-events-none opacity-0`].join(` `)),this._container){let n=t?`max-[1099.98px]:translate-x-0`:`max-[1099.98px]:-translate-x-full`;this._container.className=[`flex`,`min-h-0`,`flex-col`,`border-r`,`border-gray-200`,`bg-white`,`p-2`,`dark:border-gray-700`,`dark:bg-gray-900`,`w-[4.75rem]`,`max-[1099.98px]:fixed`,e,`max-[1099.98px]:bottom-0`,`max-[1099.98px]:left-0`,`max-[1099.98px]:z-50`,`max-[1099.98px]:h-auto`,`max-[1099.98px]:w-[17rem]`,`max-[1099.98px]:max-w-[85vw]`,`max-[1099.98px]:shadow-xl`,`max-[1099.98px]:transition-transform`,`max-[1099.98px]:duration-200`,`max-[1099.98px]:ease-out`,n,`min-[1100px]:fixed`,`min-[1100px]:left-0`,`min-[1100px]:top-14`,`min-[1100px]:bottom-0`,`min-[1100px]:z-30`,`min-[1100px]:w-[17rem]`,`min-[1100px]:translate-x-0`,`min-[1100px]:p-3`,`min-[1100px]:shadow-none`].join(` `)}}_buildUserHeader(){if(!this._container)return;this._header||(this._header=document.createElement(`div`),this._header.className=`mb-4`,this._container.appendChild(this._header));let e=Array.from(this.querySelectorAll(`[slot="action-header"]`)).find(e=>e!==this._backdrop&&e!==this._container);if(e){this._header.replaceChildren(e);return}let t=document.createElement(`mint-sidenav-action-menu`);t.setAttribute(`title`,this.getUserName()),t.setAttribute(`subtitle`,this.getUserStatus()),this._header.replaceChildren(t)}_replaceSlottedChildren(e,t){let n=Array.from(this.querySelectorAll(`[slot="${t}"]`)).filter(e=>e!==this._container&&e!==this._backdrop);e.replaceChildren(...n)}_buildContent(){this._container&&(this._content||(this._content=document.createElement(`div`),this._content.className=`min-h-0 grow overflow-y-auto`,this._container.appendChild(this._content)),this._replaceSlottedChildren(this._content,`links`))}_buildFooter(){if(!this._container)return;this._footer||(this._footer=document.createElement(`div`),this._footer.className=`mt-auto border-t border-gray-200 py-3 dark:border-gray-700`,this._container.appendChild(this._footer));let e=document.createElement(`div`);e.className=`space-y-1`,this._replaceSlottedChildren(e,`bottom-links`),this._footer.innerHTML=``,this._footer.appendChild(e)}render(){this._ensureBackdrop(),this._ensureContainer(),this._syncShell(),this._buildUserHeader(),this._buildContent(),this._buildFooter()}};customElements.get(`mint-side-navigation`)||customElements.define(`mint-side-navigation`,R);var z=class extends HTMLElement{constructor(...e){super(...e),this._bar=null,this._menuButton=null,this._logoLink=null,this._menuClickHandler=null}static get observedAttributes(){return[`logo-src`,`logo-href`,`logo-alt`,`menu-target`]}connectedCallback(){this.classList.add(`sticky`,`top-0`,`z-50`,`w-full`,`shrink-0`,`bg-white`,`dark:bg-gray-900`),this.render()}disconnectedCallback(){this._menuButton&&this._menuClickHandler&&(this._menuButton.removeEventListener(`click`,this._menuClickHandler),this._menuClickHandler=null)}attributeChangedCallback(e,t,n){t!==n&&this.render()}_getLogoSrc(){return this.getAttribute(`logo-src`)||``}_getLogoHref(){return this.getAttribute(`logo-href`)||`/`}_getLogoAlt(){return this.getAttribute(`logo-alt`)||`Home`}_getMenuTargetId(){return(this.getAttribute(`menu-target`)||``).replace(/^#/,``)}_toggleMenuTarget(){let e=this._getMenuTargetId();if(!e)return;let t=document.getElementById(e);!t||t.tagName!==`MINT-SIDE-NAVIGATION`||(t.getAttribute(`open`)===`true`?t.removeAttribute(`open`):t.setAttribute(`open`,`true`))}render(){if(this._bar||(this._bar=document.createElement(`div`),this._bar.className=`flex h-14 w-full items-center gap-2 border-b border-gray-200 px-3 dark:border-gray-700`,this.appendChild(this._bar)),!this._menuButton){this._menuButton=document.createElement(`button`),this._menuButton.type=`button`,this._menuButton.className=`inline-flex h-10 w-10 shrink-0 cursor-pointer items-center justify-center rounded-lg border border-transparent text-gray-700 transition-colors hover:bg-black/5 min-[1100px]:hidden dark:text-gray-200 dark:hover:bg-white/10`,this._menuButton.setAttribute(`aria-label`,`Open navigation menu`);let e=document.createElement(`mint-icon`);e.setAttribute(`name`,`menu`),e.className=`h-5 w-5`,this._menuButton.appendChild(e),this._menuClickHandler=()=>this._toggleMenuTarget(),this._menuButton.addEventListener(`click`,this._menuClickHandler),this._bar.appendChild(this._menuButton)}let e=!!this._getMenuTargetId();this._menuButton.classList.toggle(`hidden`,!e),this._logoLink||(this._logoLink=document.createElement(`a`),this._logoLink.className=`flex shrink-0 items-center`,this._bar.appendChild(this._logoLink)),this._logoLink.href=this._getLogoHref(),this._logoLink.setAttribute(`aria-label`,this._getLogoAlt());let t=this._getLogoSrc();if(t){let e=document.createElement(`img`);e.className=`h-8 max-w-[10rem] object-contain`,e.decoding=`async`,e.src=t,e.alt=this._getLogoAlt(),this._logoLink.replaceChildren(e),this._logoLink.classList.remove(`pointer-events-none`,`opacity-40`)}else{this._logoLink.replaceChildren(),this._logoLink.classList.add(`pointer-events-none`,`opacity-40`);let e=document.createElement(`span`);e.className=`text-sm font-semibold text-gray-400 dark:text-gray-500`,e.textContent=`Logo`,this._logoLink.appendChild(e)}let n=this._bar.querySelector(`[data-mint-topnav-spacer]`);n||(n=document.createElement(`div`),n.setAttribute(`data-mint-topnav-spacer`,`true`),n.className=`min-w-0 flex-1`,this._bar.appendChild(n));let r=Array.from(this.querySelectorAll(`[slot="actions"]`)),i=this._bar.querySelector(`[data-mint-topnav-actions]`);i||(i=document.createElement(`div`),i.setAttribute(`data-mint-topnav-actions`,`true`),i.className=`flex shrink-0 items-center gap-2`,this._bar.appendChild(i)),i.replaceChildren(...r)}};customElements.get(`mint-top-navigation`)||customElements.define(`mint-top-navigation`,z);var B=class extends HTMLElement{constructor(...e){super(...e),this._lastScrollY=0,this._scrollHandler=null}connectedCallback(){this.classList.add(`fixed`,`bottom-0`,`left-0`,`right-0`,`z-30`,`flex`,`w-full`,`items-stretch`,`justify-around`,`gap-1`,`border-t`,`border-gray-200`,`bg-white`,`px-1`,`pt-1`,`pb-[env(safe-area-inset-bottom,0px)]`,`min-[1100px]:hidden`,`transition-transform`,`duration-200`,`ease-out`,`translate-y-0`,`dark:border-gray-700`,`dark:bg-gray-900`),this.setAttribute(`role`,`navigation`),this.setAttribute(`aria-label`,`Primary`),this._lastScrollY=window.scrollY,this._attachScrollListener()}disconnectedCallback(){this._detachScrollListener()}_attachScrollListener(){this._scrollHandler||(this._scrollHandler=()=>{let e=window.scrollY;if(e<=8){this.classList.remove(`translate-y-full`),this.classList.add(`translate-y-0`),this._lastScrollY=e;return}let t=e-this._lastScrollY;Math.abs(t)<4||(t>0?(this.classList.remove(`translate-y-0`),this.classList.add(`translate-y-full`)):(this.classList.remove(`translate-y-full`),this.classList.add(`translate-y-0`)),this._lastScrollY=e)},window.addEventListener(`scroll`,this._scrollHandler,{passive:!0}))}_detachScrollListener(){this._scrollHandler&&=(window.removeEventListener(`scroll`,this._scrollHandler),null)}};customElements.get(`mint-bottom-navigation`)||customElements.define(`mint-bottom-navigation`,B);var V=class extends HTMLElement{constructor(...e){super(...e),this._root=null}static get observedAttributes(){return[`icon`,`label`,`href`,`active`]}connectedCallback(){this.classList.add(`contents`),this.render()}attributeChangedCallback(e,t,n){t!==n&&this.render()}_isActive(){return this.getAttribute(`active`)===`true`}_getLabel(){return this.getAttribute(`label`)||``}_getIcon(){return this.getAttribute(`icon`)||``}_getHref(){return this.getAttribute(`href`)}render(){let e=this._getHref(),t=this._getLabel(),n=this._getIcon(),r=this._isActive(),i=r?`text-blue-600 dark:text-blue-400`:`text-gray-600 hover:bg-black/5 dark:text-gray-300 dark:hover:bg-white/10`,a;e?(a=document.createElement(`a`),a.href=e):(a=document.createElement(`button`),a.type=`button`),a.className=`flex min-w-0 flex-1 flex-col items-center justify-center gap-1 rounded-lg px-1 py-2 text-center text-[11px] font-medium leading-tight transition-colors ${i}`,a.setAttribute(`aria-current`,r?`page`:`false`),a.setAttribute(`aria-label`,t||`Navigation item`);let o=document.createElement(`span`);if(o.className=`inline-flex h-6 w-6 items-center justify-center`,n){let e=document.createElement(`mint-icon`);e.setAttribute(`name`,n),e.className=r?`h-6 w-6`:`h-6 w-6 opacity-90`,o.appendChild(e)}let s=document.createElement(`span`);s.className=`block w-full truncate`,s.textContent=t,a.appendChild(o),a.appendChild(s),this.replaceChildren(a),this._root=a}};customElements.get(`mint-bottom-nav-item`)||customElements.define(`mint-bottom-nav-item`,V),exports.Alert=E,exports.BackButton=l,exports.BottomNavItem=V,exports.BottomNavigation=B,exports.Button=r,exports.default=r,exports.Card=s,exports.Chart=N,exports.Checkbox=m,exports.Chip=C,exports.Choice=g,exports.Clickable=T,exports.DatePicker=v,exports.Dropzone=b,exports.Form=x,exports.Grid=d,exports.Icon=n,exports.Input=_,exports.Link=c,exports.Modal=f,exports.OffCanvas=O,exports.Page=u,exports.Popover=p,exports.ResourceTable=D,exports.Select=y,exports.SideNavigation=R,exports.SideNavigationActionLinks=I,exports.SideNavigationActionMenu=L,exports.SideNavigationLink=P,exports.SideNavigationLinks=F,exports.Spinner=t,exports.Stack=o,exports.Switch=i,exports.Tab=k,exports.TabContent=j,exports.TabList=A,exports.Table=S,exports.Tabs=M,exports.Tags=w,exports.Text=a,exports.TopNavigation=z;
+    `,n.appendChild(r);let i=document.createElement(`div`);return i.appendChild(e),i.appendChild(n),i}render(){let e=Array.from(this.children).filter(e=>e!==this._wrapper&&e.getAttribute(`slot`)===`action-links`);this._wrapper||(this._wrapper=document.createElement(`div`),this._wrapper.className=`relative`,this.appendChild(this._wrapper)),this._wrapper.innerHTML=``,this._trigger=document.createElement(`button`),this._trigger.type=`button`,this._trigger.id=this._triggerId,this._trigger.className=`flex w-full cursor-pointer items-center gap-3 rounded-xl border border-gray-200 bg-gray-50 px-3 py-2 text-left transition-colors hover:bg-gray-100 dark:border-gray-700 dark:bg-gray-800 dark:hover:bg-gray-700`;let t=document.createElement(`div`);t.className=`inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-blue-600 text-xs font-semibold text-white`,t.textContent=this._getTitle().split(` `).map(e=>e[0]).join(``).slice(0,2).toUpperCase();let n=document.createElement(`div`);n.className=`min-w-0 flex-1`;let r=document.createElement(`mint-text`);r.setAttribute(`size`,`body`),r.setAttribute(`bold`,`true`),r.className=`truncate text-gray-900 dark:text-gray-100`,r.textContent=this._getTitle();let i=document.createElement(`mint-text`);i.setAttribute(`size`,`small`),i.setAttribute(`variant`,`muted`),i.className=`truncate`,i.textContent=this._getSubtitle();let a=document.createElement(`div`);a.className=`mint-sidenav-action-menu-caret pointer-events-none z-10 flex flex-col items-center`;let o=document.createElement(`mint-icon`);o.setAttribute(`name`,`caret-up`),o.className=`h-[.9em] w-[.9em] text-gray-400 dark:text-gray-500 mb-[-.2rem]`;let s=document.createElement(`mint-icon`);s.setAttribute(`name`,`caret-down`),s.className=`h-[.9em] w-[.9em] text-gray-400 dark:text-gray-500 mt-[-.2rem]`,a.appendChild(o),a.appendChild(s),n.appendChild(r),n.appendChild(i),this._trigger.appendChild(t),this._trigger.appendChild(n),this._trigger.appendChild(a),this._popover=document.createElement(`mint-popover`),this._popover.setAttribute(`trigger-id`,this._triggerId),this._popover.setAttribute(`direction`,`right`),this._popover.setAttribute(`padding`,`0`);let c=document.createElement(`div`);c.className=`w-64`,e.length>0?e.forEach(e=>{e.setAttribute(`hidden`,`true`);let t=e.cloneNode(!0);t.removeAttribute(`hidden`),t.removeAttribute(`slot`),c.appendChild(t)}):c.appendChild(this._createDefaultGroup()),this._popover.appendChild(c),this._wrapper.appendChild(this._trigger),this._wrapper.appendChild(this._popover)}};customElements.get(`mint-sidenav-action-menu`)||customElements.define(`mint-sidenav-action-menu`,L);var R=class extends HTMLElement{constructor(...e){super(...e),this._backdrop=null,this._container=null,this._header=null,this._content=null,this._footer=null,this._escapeHandler=null,this._mediaQuery=null,this._mediaListener=null}static get observedAttributes(){return[`user-name`,`user-status`,`open`,`drawer-top-class`]}connectedCallback(){this.classList.add(`relative`,`block`,`shrink-0`,`w-0`,`overflow-visible`,`min-[1100px]:w-[17rem]`,`min-[1100px]:shrink-0`),this._attachEscapeListener(),this._attachMediaListener(),this.render()}disconnectedCallback(){this._detachEscapeListener(),this._detachMediaListener()}attributeChangedCallback(e,t,n){t!==n&&this.render()}_attachEscapeListener(){this._escapeHandler||(this._escapeHandler=e=>{e.key===`Escape`&&this.getAttribute(`open`)===`true`&&this.removeAttribute(`open`)},document.addEventListener(`keydown`,this._escapeHandler))}_detachEscapeListener(){this._escapeHandler&&=(document.removeEventListener(`keydown`,this._escapeHandler),null)}_attachMediaListener(){this._mediaListener||(this._mediaQuery=window.matchMedia(`(min-width: 1100px)`),this._mediaListener=()=>{this._mediaQuery?.matches&&this.removeAttribute(`open`)},this._mediaQuery.addEventListener(`change`,this._mediaListener))}_detachMediaListener(){this._mediaQuery&&this._mediaListener&&this._mediaQuery.removeEventListener(`change`,this._mediaListener),this._mediaQuery=null,this._mediaListener=null}getUserName(){return this.getAttribute(`user-name`)||`Acme Inc`}getUserStatus(){return this.getAttribute(`user-status`)||`Enterprise`}_isOpen(){return this.getAttribute(`open`)===`true`}_ensureBackdrop(){this._backdrop||(this._backdrop=document.createElement(`div`),this._backdrop.setAttribute(`aria-hidden`,`true`),this._backdrop.addEventListener(`click`,()=>this.removeAttribute(`open`)),this.insertBefore(this._backdrop,this.firstChild))}_ensureContainer(){this._container||(this._container=document.createElement(`aside`),this.appendChild(this._container))}_syncShell(){let e=`max-[1099.98px]:top-14`,t=this._isOpen();if(this._backdrop&&(this._backdrop.className=[`fixed`,e,`left-0`,`right-0`,`bottom-0`,`z-40`,`bg-black/50`,`transition-opacity`,`duration-200`,`min-[1100px]:hidden`,t?`pointer-events-auto opacity-100`:`pointer-events-none opacity-0`].join(` `)),this._container){let n=t?`max-[1099.98px]:translate-x-0`:`max-[1099.98px]:-translate-x-full`;this._container.className=[`flex`,`min-h-0`,`flex-col`,`border-r`,`border-gray-200`,`bg-white`,`p-2`,`dark:border-gray-700`,`dark:bg-gray-900`,`w-[4.75rem]`,`max-[1099.98px]:fixed`,e,`max-[1099.98px]:bottom-0`,`max-[1099.98px]:left-0`,`max-[1099.98px]:z-50`,`max-[1099.98px]:h-auto`,`max-[1099.98px]:w-[17rem]`,`max-[1099.98px]:max-w-[85vw]`,`max-[1099.98px]:shadow-xl`,`max-[1099.98px]:transition-transform`,`max-[1099.98px]:duration-200`,`max-[1099.98px]:ease-out`,n,`min-[1100px]:fixed`,`min-[1100px]:left-0`,`min-[1100px]:top-14`,`min-[1100px]:bottom-0`,`min-[1100px]:z-30`,`min-[1100px]:w-[17rem]`,`min-[1100px]:translate-x-0`,`min-[1100px]:p-3`,`min-[1100px]:shadow-none`].join(` `)}}_buildUserHeader(){if(!this._container)return;this._header||(this._header=document.createElement(`div`),this._header.className=`mb-4`,this._container.appendChild(this._header));let e=Array.from(this.querySelectorAll(`[slot="action-header"]`)).find(e=>e!==this._backdrop&&e!==this._container);if(e){this._header.replaceChildren(e);return}let t=document.createElement(`mint-sidenav-action-menu`);t.setAttribute(`title`,this.getUserName()),t.setAttribute(`subtitle`,this.getUserStatus()),this._header.replaceChildren(t)}_replaceSlottedChildren(e,t){let n=Array.from(this.querySelectorAll(`[slot="${t}"]`)).filter(e=>e!==this._container&&e!==this._backdrop);e.replaceChildren(...n)}_buildContent(){this._container&&(this._content||(this._content=document.createElement(`div`),this._content.className=`min-h-0 grow overflow-y-auto`,this._container.appendChild(this._content)),this._replaceSlottedChildren(this._content,`links`))}_buildFooter(){if(!this._container)return;this._footer||(this._footer=document.createElement(`div`),this._footer.className=`mt-auto border-t border-gray-200 py-3 dark:border-gray-700`,this._container.appendChild(this._footer));let e=document.createElement(`div`);e.className=`space-y-1`,this._replaceSlottedChildren(e,`bottom-links`),this._footer.innerHTML=``,this._footer.appendChild(e)}render(){this._ensureBackdrop(),this._ensureContainer(),this._syncShell(),this._buildUserHeader(),this._buildContent(),this._buildFooter()}};customElements.get(`mint-side-navigation`)||customElements.define(`mint-side-navigation`,R);var z=class extends HTMLElement{constructor(...e){super(...e),this._bar=null,this._menuButton=null,this._logoLink=null,this._menuClickHandler=null,this._themeObserver=null}static get observedAttributes(){return[`logo-src`,`logo-src-light`,`logo-src-dark`,`logo-href`,`logo-alt`,`menu-target`]}connectedCallback(){this.classList.add(`sticky`,`top-0`,`z-50`,`w-full`,`shrink-0`,`bg-white`,`dark:bg-gray-900`),this._observeTheme(),this.render()}disconnectedCallback(){this._menuButton&&this._menuClickHandler&&(this._menuButton.removeEventListener(`click`,this._menuClickHandler),this._menuClickHandler=null),this._themeObserver&&=(this._themeObserver.disconnect(),null)}attributeChangedCallback(e,t,n){t!==n&&this.render()}_getLogoSrc(){return this.getAttribute(`logo-src`)||``}_getLogoSrcLight(){return this.getAttribute(`logo-src-light`)||``}_getLogoSrcDark(){return this.getAttribute(`logo-src-dark`)||``}_getResolvedLogoSrc(){let e=this._getLogoSrcLight(),t=this._getLogoSrcDark();return e||t?document.documentElement.classList.contains(`dark`)?t||e:e||t:this._getLogoSrc()}_observeTheme(){this._themeObserver||(this._themeObserver=new MutationObserver(()=>this.render()),this._themeObserver.observe(document.documentElement,{attributes:!0,attributeFilter:[`class`]}))}_getLogoHref(){return this.getAttribute(`logo-href`)||`/`}_getLogoAlt(){return this.getAttribute(`logo-alt`)||`Home`}_getMenuTargetId(){return(this.getAttribute(`menu-target`)||``).replace(/^#/,``)}_toggleMenuTarget(){let e=this._getMenuTargetId();if(!e)return;let t=document.getElementById(e);!t||t.tagName!==`MINT-SIDE-NAVIGATION`||(t.getAttribute(`open`)===`true`?t.removeAttribute(`open`):t.setAttribute(`open`,`true`))}render(){if(this._bar||(this._bar=document.createElement(`div`),this._bar.className=`flex h-14 w-full items-center gap-2 border-b border-gray-200 px-3 dark:border-gray-700`,this.appendChild(this._bar)),!this._menuButton){this._menuButton=document.createElement(`button`),this._menuButton.type=`button`,this._menuButton.className=`inline-flex h-10 w-10 shrink-0 cursor-pointer items-center justify-center rounded-lg border border-transparent text-gray-700 transition-colors hover:bg-black/5 min-[1100px]:hidden dark:text-gray-200 dark:hover:bg-white/10`,this._menuButton.setAttribute(`aria-label`,`Open navigation menu`);let e=document.createElement(`mint-icon`);e.setAttribute(`name`,`menu`),e.className=`h-5 w-5`,this._menuButton.appendChild(e),this._menuClickHandler=()=>this._toggleMenuTarget(),this._menuButton.addEventListener(`click`,this._menuClickHandler),this._bar.appendChild(this._menuButton)}let e=!!this._getMenuTargetId();this._menuButton.classList.toggle(`hidden`,!e),this._logoLink||(this._logoLink=document.createElement(`a`),this._logoLink.className=`flex shrink-0 items-center`,this._bar.appendChild(this._logoLink)),this._logoLink.href=this._getLogoHref(),this._logoLink.setAttribute(`aria-label`,this._getLogoAlt());let t=this._getResolvedLogoSrc();if(t){let e=document.createElement(`img`);e.className=`h-8 max-w-[10rem] object-contain`,e.decoding=`async`,e.src=t,e.alt=this._getLogoAlt(),this._logoLink.replaceChildren(e),this._logoLink.classList.remove(`pointer-events-none`,`opacity-40`)}else{this._logoLink.replaceChildren(),this._logoLink.classList.add(`pointer-events-none`,`opacity-40`);let e=document.createElement(`span`);e.className=`text-sm font-semibold text-gray-400 dark:text-gray-500`,e.textContent=`Logo`,this._logoLink.appendChild(e)}let n=this._bar.querySelector(`[data-mint-topnav-spacer]`);n||(n=document.createElement(`div`),n.setAttribute(`data-mint-topnav-spacer`,`true`),n.className=`min-w-0 flex-1`,this._bar.appendChild(n));let r=Array.from(this.querySelectorAll(`[slot="actions"]`)),i=this._bar.querySelector(`[data-mint-topnav-actions]`);i||(i=document.createElement(`div`),i.setAttribute(`data-mint-topnav-actions`,`true`),i.className=`flex shrink-0 items-center gap-2`,this._bar.appendChild(i)),i.replaceChildren(...r)}};customElements.get(`mint-top-navigation`)||customElements.define(`mint-top-navigation`,z);var B=class extends HTMLElement{constructor(...e){super(...e),this._lastScrollY=0,this._scrollHandler=null}connectedCallback(){this.classList.add(`fixed`,`bottom-0`,`left-0`,`right-0`,`z-30`,`flex`,`w-full`,`items-stretch`,`justify-around`,`gap-1`,`border-t`,`border-gray-200`,`bg-white`,`px-1`,`pt-1`,`pb-[env(safe-area-inset-bottom,0px)]`,`min-[1100px]:hidden`,`transition-transform`,`duration-200`,`ease-out`,`translate-y-0`,`dark:border-gray-700`,`dark:bg-gray-900`),this.setAttribute(`role`,`navigation`),this.setAttribute(`aria-label`,`Primary`),this._lastScrollY=window.scrollY,this._attachScrollListener()}disconnectedCallback(){this._detachScrollListener()}_attachScrollListener(){this._scrollHandler||(this._scrollHandler=()=>{let e=window.scrollY;if(e<=8){this.classList.remove(`translate-y-full`),this.classList.add(`translate-y-0`),this._lastScrollY=e;return}let t=e-this._lastScrollY;Math.abs(t)<4||(t>0?(this.classList.remove(`translate-y-0`),this.classList.add(`translate-y-full`)):(this.classList.remove(`translate-y-full`),this.classList.add(`translate-y-0`)),this._lastScrollY=e)},window.addEventListener(`scroll`,this._scrollHandler,{passive:!0}))}_detachScrollListener(){this._scrollHandler&&=(window.removeEventListener(`scroll`,this._scrollHandler),null)}};customElements.get(`mint-bottom-navigation`)||customElements.define(`mint-bottom-navigation`,B);var V=class extends HTMLElement{constructor(...e){super(...e),this._root=null}static get observedAttributes(){return[`icon`,`label`,`href`,`active`]}connectedCallback(){this.classList.add(`contents`),this.render()}attributeChangedCallback(e,t,n){t!==n&&this.render()}_isActive(){return this.getAttribute(`active`)===`true`}_getLabel(){return this.getAttribute(`label`)||``}_getIcon(){return this.getAttribute(`icon`)||``}_getHref(){return this.getAttribute(`href`)}render(){let e=this._getHref(),t=this._getLabel(),n=this._getIcon(),r=this._isActive(),i=r?`text-blue-600 dark:text-blue-400`:`text-gray-600 hover:bg-black/5 dark:text-gray-300 dark:hover:bg-white/10`,a;e?(a=document.createElement(`a`),a.href=e):(a=document.createElement(`button`),a.type=`button`),a.className=`flex min-w-0 flex-1 flex-col items-center justify-center gap-1 rounded-lg px-1 py-2 text-center text-[11px] font-medium leading-tight transition-colors ${i}`,a.setAttribute(`aria-current`,r?`page`:`false`),a.setAttribute(`aria-label`,t||`Navigation item`);let o=document.createElement(`span`);if(o.className=`inline-flex h-6 w-6 items-center justify-center`,n){let e=document.createElement(`mint-icon`);e.setAttribute(`name`,n),e.className=r?`h-6 w-6`:`h-6 w-6 opacity-90`,o.appendChild(e)}let s=document.createElement(`span`);s.className=`block w-full truncate`,s.textContent=t,a.appendChild(o),a.appendChild(s),this.replaceChildren(a),this._root=a}};customElements.get(`mint-bottom-nav-item`)||customElements.define(`mint-bottom-nav-item`,V),exports.Alert=E,exports.BackButton=l,exports.BottomNavItem=V,exports.BottomNavigation=B,exports.Button=r,exports.default=r,exports.Card=s,exports.Chart=N,exports.Checkbox=m,exports.Chip=C,exports.Choice=g,exports.Clickable=T,exports.DatePicker=v,exports.Dropzone=b,exports.Form=x,exports.Grid=d,exports.Icon=n,exports.Input=_,exports.Link=c,exports.Modal=f,exports.OffCanvas=O,exports.Page=u,exports.Popover=p,exports.ResourceTable=D,exports.Select=y,exports.SideNavigation=R,exports.SideNavigationActionLinks=I,exports.SideNavigationActionMenu=L,exports.SideNavigationLink=P,exports.SideNavigationLinks=F,exports.Spinner=t,exports.Stack=o,exports.Switch=i,exports.Tab=k,exports.TabContent=j,exports.TabList=A,exports.Table=S,exports.Tabs=M,exports.Tags=w,exports.Text=a,exports.TopNavigation=z;

package/dist/index.js

@@ -8792,21 +8792,23 @@ customElements.get("mint-side-navigation") || customElements.define("mint-side-n
 //#region src/components/top-navigation/TopNavigation.ts
 var z = class extends HTMLElement {
 	constructor(...e) {
-		super(...e), this._bar = null, this._menuButton = null, this._logoLink = null, this._menuClickHandler = null;
+		super(...e), this._bar = null, this._menuButton = null, this._logoLink = null, this._menuClickHandler = null, this._themeObserver = null;
 	}
 	static get observedAttributes() {
 		return [
 			"logo-src",
+			"logo-src-light",
+			"logo-src-dark",
 			"logo-href",
 			"logo-alt",
 			"menu-target"
 		];
 	}
 	connectedCallback() {
-		this.classList.add("sticky", "top-0", "z-50", "w-full", "shrink-0", "bg-white", "dark:bg-gray-900"), this.render();
+		this.classList.add("sticky", "top-0", "z-50", "w-full", "shrink-0", "bg-white", "dark:bg-gray-900"), this._observeTheme(), this.render();
 	}
 	disconnectedCallback() {
-		this._menuButton && this._menuClickHandler && (this._menuButton.removeEventListener("click", this._menuClickHandler), this._menuClickHandler = null);
+		this._menuButton && this._menuClickHandler && (this._menuButton.removeEventListener("click", this._menuClickHandler), this._menuClickHandler = null), this._themeObserver &&= (this._themeObserver.disconnect(), null);
 	}
 	attributeChangedCallback(e, t, n) {
 		t !== n && this.render();
@@ -8814,6 +8816,22 @@ var z = class extends HTMLElement {
 	_getLogoSrc() {
 		return this.getAttribute("logo-src") || "";
 	}
+	_getLogoSrcLight() {
+		return this.getAttribute("logo-src-light") || "";
+	}
+	_getLogoSrcDark() {
+		return this.getAttribute("logo-src-dark") || "";
+	}
+	_getResolvedLogoSrc() {
+		let e = this._getLogoSrcLight(), t = this._getLogoSrcDark();
+		return e || t ? document.documentElement.classList.contains("dark") ? t || e : e || t : this._getLogoSrc();
+	}
+	_observeTheme() {
+		this._themeObserver || (this._themeObserver = new MutationObserver(() => this.render()), this._themeObserver.observe(document.documentElement, {
+			attributes: !0,
+			attributeFilter: ["class"]
+		}));
+	}
 	_getLogoHref() {
 		return this.getAttribute("logo-href") || "/";
 	}
@@ -8837,7 +8855,7 @@ var z = class extends HTMLElement {
 		}
 		let e = !!this._getMenuTargetId();
 		this._menuButton.classList.toggle("hidden", !e), this._logoLink || (this._logoLink = document.createElement("a"), this._logoLink.className = "flex shrink-0 items-center", this._bar.appendChild(this._logoLink)), this._logoLink.href = this._getLogoHref(), this._logoLink.setAttribute("aria-label", this._getLogoAlt());
-		let t = this._getLogoSrc();
+		let t = this._getResolvedLogoSrc();
 		if (t) {
 			let e = document.createElement("img");
 			e.className = "h-8 max-w-[10rem] object-contain", e.decoding = "async", e.src = t, e.alt = this._getLogoAlt(), this._logoLink.replaceChildren(e), this._logoLink.classList.remove("pointer-events-none", "opacity-40");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "monobill-mintui",
-  "version": "0.4.9",
+  "version": "0.4.91",
   "description": "A modern framework-agnostic UI kit built as Web Components. Requires Tailwind CSS.",
   "type": "module",
   "main": "./dist/index.cjs",