@taprootio/espalier 2.9.0 → 2.10.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.
- package/custom-elements.json +5523 -5128
- package/dist/header/esp-header.js +4 -4
- package/dist/menu/esp-menu.js +2 -2
- package/dist/page/esp-page.d.ts +59 -0
- package/dist/page/esp-page.js +104 -11
- package/espalier.token-manifest.json +12 -0
- package/package.json +1 -1
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var n=function(h,e,t,o){var s=arguments.length,i=s<3?e:o===null?o=Object.getOwnPropertyDescriptor(e,t):o,l;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")i=Reflect.decorate(h,e,t,o);else for(var d=h.length-1;d>=0;d--)(l=h[d])&&(i=(s<3?l(i):s>3?l(e,t,i):l(e,t))||i);return s>3&&i&&Object.defineProperty(e,t,i),i};import{css as C,html as x,nothing as D}from"lit";import{customElement as k,property as a,state as c}from"lit/decorators.js";import{classMap as A}from"lit/directives/class-map.js";import{styleMap as B}from"lit/directives/style-map.js";import"../burger/esp-burger.js";import{createRef as E,ref as L}from"lit/directives/ref.js";import{EspalierMenu as m}from"./esp-menu.js";import{renderConfiguredBrand as O,resolveConfiguredBrand as _}from"../shared/configured-brand.js";import{EspalierElementBase as T}from"../shared/esp-element-base.js";import{ESP_EVENTS as R}from"../shared/events.js";const z="(max-width: 36rem)";function u(h,e){const t=new Set(h);return{allowedValues:t,converter:{fromAttribute(s){return s??e},toAttribute(s){return t.has(s)?s:e}},defaultValue:e}}const H=["standard","centered-brand","extended","extended-centered","minimal"],V=["start","center","end"],U=["truncate","wrap","nowrap"],N=["auto","inline","drawer"],I=["hidden","visible"],g=u(H,"standard"),b=u(V,"start"),f=u(U,"truncate"),v=u(N,"auto"),w=u(I,"hidden");let r=class extends T{constructor(){super(...arguments),this.menuOpen=!1,this.menuTooLarge=!1,this.mobileMenu=!1,this.scrolled=!1,this.hiddenByScroll=!1,this.scrollProgress=0,this.showBurger=!1,this.layout=g.defaultValue,this.brandText="",this.brandLogo="",this.lightBrandLogo="",this.darkBrandLogo="",this.brandHref="",this.brandAlt="",this.brandColor="",this.lightBrandColor="",this.darkBrandColor="",this.brandAlign=b.defaultValue,this.brandWrap=f.defaultValue,this.menuDisplay=v.defaultValue,this.themeToggle=w.defaultValue,this.scrollBehavior="none",this.scrollThreshold=16,this.dockOffset=0,this.drawerTarget="",this.fullBleedContent=!1,this.menuContainer=E(),this.menuButton=E(),this.menu=void 0,this.externalDrawerTarget=null,this.lastScrollY=0,this.lastInlineMenuWidth=0,this.mobileMenuQuery=null,this.menuDrawerListenersAttached=!1,this.observingMenuContainer=!1,this.scrollListenersAttached=!1,this.scrollRafId=null,this.resizeObserver=new ResizeObserver(()=>this.syncMenuLayout()),this.menuChildObserver=null,this.updateScrollState=()=>{this.scrollRafId===null&&(this.scrollRafId=requestAnimationFrame(()=>{this.scrollRafId=null,this.runScrollStateUpdate()}))},this.handleMobileMenuQueryChange=e=>{this.mobileMenu=e.matches,this.syncMenuLayout(),this.syncExternalDrawerControl()},this.toggleTheme=()=>{const e=this.getThemeRoot();if(!e)return;e.scheme=e.scheme==="dark"?"light":"dark";const t=e.scheme==="dark"?"dark":"light";this.dispatchEvent(new CustomEvent(R.ESP_THEME_TOGGLE,{detail:{scheme:t},bubbles:!0,composed:!0}))},this.handleMenuToggleClicked=()=>{if(this.menuOpen){this.closeNav();return}this.openNav()},this.onMenuDrawerOpened=()=>{this.menuOpen=!0,document.body.classList.add("menu-open"),this.burger&&(this.burger.menuOpen=!0)},this.onMenuDrawerClosed=()=>{this.menuOpen=!1,document.body.classList.remove("menu-open"),this.burger&&(this.burger.menuOpen=!1)}}syncMenuLayout(){if(!this.menuContainer.value||!this.menu||!this.menu.getWidth)return;const e=this.menuContainer.value.clientWidth,t=this.menu.getWidth();t>0&&(this.lastInlineMenuWidth=t);const o=this.lastInlineMenuWidth||t,s=this.getExternalDrawerTarget(),i=this.menuDisplay!=="inline",l=this.showBurger||this.menuDisplay==="drawer"||this.layout==="minimal";this.menuTooLarge=i&&this.menuDisplay==="auto"&&o>e,this.menu.sliding=i&&!s&&this.hasDrawerableContent()&&(this.menuTooLarge||l||this.mobileMenu)}menuHasContent(){return!!(this.menu??this.querySelector(':scope > [slot="menu"]'))?.querySelector("esp-menu-item, esp-menu-group")}hasDrawerableContent(){return this.showBurger||!!this.getExternalDrawerTarget()||this.menuHasContent()}getExternalDrawerTarget(){if(!this.drawerTarget)return null;const e=document.getElementById(this.drawerTarget);return e===this.menu?null:e&&"openDrawer"in e&&typeof e.openDrawer=="function"&&"closeDrawer"in e&&typeof e.closeDrawer=="function"?e:null}getBurgerFocusTarget(){const t=this.shadowRoot?.querySelector("esp-header-button.menu-toggle")?.shadowRoot?.querySelector("button"),o=this.menuButton.value?.shadowRoot?.querySelector("button");return t??o??null}getScrollTokens(){const e=this.scrollBehavior.split(/\s+/).map(t=>t.trim().toLowerCase()).filter(Boolean);return new Set(e.filter(t=>t!=="none"))}getEffectiveScrollThreshold(){return Number.isFinite(this.scrollThreshold)?Math.max(0,this.scrollThreshold):0}clearScrollState(){this.scrolled=!1,this.hiddenByScroll=!1,this.scrollProgress=0}runScrollStateUpdate(){const e=this.getScrollTokens();if(!e.size){this.clearScrollState();return}const t=Math.max(0,window.scrollY||document.documentElement.scrollTop||0),o=this.getEffectiveScrollThreshold(),s=Number.isFinite(this.dockOffset)?Math.max(0,this.dockOffset):o,i=t>(e.has("dock")?s:o),l=t>this.lastScrollY,d=e.has("reveal")&&l&&t>o&&!this.menuOpen;if(this.scrolled=i,this.hiddenByScroll=d,e.has("progress")){const p=document.documentElement,y=Math.max(1,p.scrollHeight-window.innerHeight);this.scrollProgress=Math.min(1,t/y)}else this.scrollProgress=0;this.lastScrollY=t}cancelScrollUpdate(){this.scrollRafId!==null&&(cancelAnimationFrame(this.scrollRafId),this.scrollRafId=null)}syncScrollListeners(){const e=this.getScrollTokens().size>0;if(e&&!this.scrollListenersAttached?(window.addEventListener("scroll",this.updateScrollState,{passive:!0}),window.addEventListener("resize",this.updateScrollState,{passive:!0}),this.scrollListenersAttached=!0):!e&&this.scrollListenersAttached&&this.removeScrollListeners(),e){this.updateScrollState();return}this.cancelScrollUpdate(),this.clearScrollState()}removeScrollListeners(){this.scrollListenersAttached&&(window.removeEventListener("scroll",this.updateScrollState),window.removeEventListener("resize",this.updateScrollState),this.scrollListenersAttached=!1)}addMenuDrawerListeners(){!this.menu||this.menuDrawerListenersAttached||(this.menu.addEventListener("drawer-opened",this.onMenuDrawerOpened),this.menu.addEventListener("drawer-closed",this.onMenuDrawerClosed),this.menuDrawerListenersAttached=!0)}removeMenuDrawerListeners(){!this.menu||!this.menuDrawerListenersAttached||(this.menu.removeEventListener("drawer-opened",this.onMenuDrawerOpened),this.menu.removeEventListener("drawer-closed",this.onMenuDrawerClosed),this.menuDrawerListenersAttached=!1)}observeMenuContainer(){!this.menuContainer.value||this.observingMenuContainer||(this.resizeObserver.observe(this.menuContainer.value),this.observingMenuContainer=!0)}disconnectResizeObserver(){this.observingMenuContainer&&(this.resizeObserver.disconnect(),this.observingMenuContainer=!1)}observeMenuChildren(){!this.menu||this.menuChildObserver||(this.menuChildObserver=new MutationObserver(()=>{this.syncMenuLayout(),this.requestUpdate()}),this.menuChildObserver.observe(this.menu,{childList:!0,subtree:!0}))}syncMobileMenuQuery(){if("matchMedia"in window){if(!this.mobileMenuQuery){this.mobileMenuQuery=window.matchMedia(z),this.mobileMenu=this.mobileMenuQuery.matches,this.mobileMenuQuery.addEventListener("change",this.handleMobileMenuQueryChange);return}this.mobileMenu=this.mobileMenuQuery.matches}}getThemeRoot(){return this.traverseToClosest("esp-root")}syncExternalDrawerTarget(){const e=this.getExternalDrawerTarget(),t=e===this.menu?null:e;t!==this.externalDrawerTarget&&(this.externalDrawerTarget?.removeEventListener("drawer-opened",this.onMenuDrawerOpened),this.externalDrawerTarget?.removeEventListener("drawer-closed",this.onMenuDrawerClosed),this.externalDrawerTarget instanceof m&&(this.externalDrawerTarget.hasExternalDrawerControl=!1),this.externalDrawerTarget=t,this.externalDrawerTarget?.addEventListener("drawer-opened",this.onMenuDrawerOpened),this.externalDrawerTarget?.addEventListener("drawer-closed",this.onMenuDrawerClosed)),this.syncExternalDrawerControl()}burgerVisibleForTarget(){if(this.menuDisplay==="inline")return!1;const e=this.showBurger||this.menuDisplay==="drawer"||this.layout==="minimal";return this.menuTooLarge||this.mobileMenu||e}syncExternalDrawerControl(){this.externalDrawerTarget instanceof m&&(this.externalDrawerTarget.hasExternalDrawerControl=this.burgerVisibleForTarget())}openNav(){const e=this.getBurgerFocusTarget(),t=this.getExternalDrawerTarget();if(this.burger&&(this.burger.menuOpen=!0),t){this.menuOpen=!0,t.openDrawer(e),document.body.classList.add("menu-open");return}if(this.menu){this.menu.sliding=!0,this.menuOpen=!0,this.menu.openDrawer(e),document.body.classList.add("menu-open");return}this.burger&&(this.burger.menuOpen=!1)}closeNav(){this.menuOpen=!1,this.burger&&(this.burger.menuOpen=!1);const e=this.getExternalDrawerTarget();if(e){e.closeDrawer(),document.body.classList.remove("menu-open");return}this.menu&&(this.menu.closeDrawer(),document.body.classList.remove("menu-open"))}get burger(){return this.menuButton.value??void 0}willUpdate(e){super.willUpdate(e),e.has("layout")&&!g.allowedValues.has(this.layout)&&(this.layout=g.defaultValue),e.has("brandAlign")&&!b.allowedValues.has(this.brandAlign)&&(this.brandAlign=b.defaultValue),e.has("brandWrap")&&!f.allowedValues.has(this.brandWrap)&&(this.brandWrap=f.defaultValue),e.has("menuDisplay")&&!v.allowedValues.has(this.menuDisplay)&&(this.menuDisplay=v.defaultValue),e.has("themeToggle")&&!w.allowedValues.has(this.themeToggle)&&(this.themeToggle=w.defaultValue)}firstUpdated(e){if(super.firstUpdated(e),!this.menuContainer.value)return;const s=(this.menuContainer.value.firstElementChild?.assignedElements()??[])[0];s instanceof m?(this.menu=s,this.addMenuDrawerListeners(),this.observeMenuChildren()):s&&console.warn("<esp-header>: the menu slot expects an <esp-menu> element, received",s),this.observeMenuContainer(),this.syncExternalDrawerTarget(),this.syncMobileMenuQuery(),this.syncScrollListeners(),this.syncMenuLayout()}updated(e){super.updated(e),(e.has("showBurger")||e.has("drawerTarget")||e.has("menuDisplay")||e.has("layout"))&&(this.syncExternalDrawerTarget(),this.syncMenuLayout()),(e.has("mobileMenu")||e.has("menuTooLarge"))&&this.syncExternalDrawerControl(),e.has("scrollBehavior")?this.syncScrollListeners():(e.has("scrollThreshold")||e.has("dockOffset"))&&this.updateScrollState()}connectedCallback(){super.connectedCallback(),this.syncScrollListeners(),this.syncMobileMenuQuery(),this.addMenuDrawerListeners(),this.syncExternalDrawerTarget(),this.observeMenuContainer(),this.observeMenuChildren()}disconnectedCallback(){this.removeMenuDrawerListeners(),this.externalDrawerTarget?.removeEventListener("drawer-opened",this.onMenuDrawerOpened),this.externalDrawerTarget?.removeEventListener("drawer-closed",this.onMenuDrawerClosed),this.externalDrawerTarget instanceof m&&(this.externalDrawerTarget.hasExternalDrawerControl=!1),this.externalDrawerTarget=null,this.mobileMenuQuery?.removeEventListener("change",this.handleMobileMenuQueryChange),this.mobileMenuQuery=null,this.removeScrollListeners(),this.cancelScrollUpdate(),this.disconnectResizeObserver(),this.menuChildObserver?.disconnect(),this.menuChildObserver=null,super.disconnectedCallback()}render(){const{menuOpen:e,menuTooLarge:t,mobileMenu:o}=this,s=this.menuDisplay!=="inline",i=s&&(this.showBurger||this.menuDisplay==="drawer"||this.layout==="minimal"),l=this.getScrollTokens(),d=l.has("progress"),p=_({scheme:this.scheme,brandLogo:this.brandLogo,brandColor:this.brandColor,lightBrandLogo:this.lightBrandLogo,darkBrandLogo:this.darkBrandLogo,lightBrandColor:this.lightBrandColor,darkBrandColor:this.darkBrandColor}),y={"--_esp-header-brand-color":p.brandColor||null,"--_esp-header-scroll-progress":String(this.scrollProgress)},M={"menu-open":e,"too-wide":s&&this.hasDrawerableContent()&&(t||o||i),[`layout-${this.layout}`]:!0,"is-scrolled":this.scrolled,"hide-on-scroll":this.hiddenByScroll,"scroll-compact":l.has("compact"),"scroll-elevate":l.has("elevate"),"scroll-transparent":l.has("transparent")||l.has("transparent-to-solid"),"scroll-collapse-topbar":l.has("collapse-topbar")},S=this.scheme==="dark"?"light":"dark";return x`
|
|
1
|
+
var n=function(h,e,t,o){var s=arguments.length,i=s<3?e:o===null?o=Object.getOwnPropertyDescriptor(e,t):o,l;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")i=Reflect.decorate(h,e,t,o);else for(var d=h.length-1;d>=0;d--)(l=h[d])&&(i=(s<3?l(i):s>3?l(e,t,i):l(e,t))||i);return s>3&&i&&Object.defineProperty(e,t,i),i};import{css as S,html as x,nothing as D}from"lit";import{customElement as k,property as a,state as c}from"lit/decorators.js";import{classMap as A}from"lit/directives/class-map.js";import{styleMap as B}from"lit/directives/style-map.js";import"../burger/esp-burger.js";import{createRef as E,ref as L}from"lit/directives/ref.js";import{EspalierMenu as m}from"./esp-menu.js";import{renderConfiguredBrand as O,resolveConfiguredBrand as _}from"../shared/configured-brand.js";import{EspalierElementBase as T}from"../shared/esp-element-base.js";import{ESP_EVENTS as R}from"../shared/events.js";const z="(max-width: 36rem)";function u(h,e){const t=new Set(h);return{allowedValues:t,converter:{fromAttribute(s){return s??e},toAttribute(s){return t.has(s)?s:e}},defaultValue:e}}const H=["standard","centered-brand","extended","extended-centered","minimal"],V=["start","center","end"],U=["truncate","wrap","nowrap"],N=["auto","inline","drawer"],I=["hidden","visible"],g=u(H,"standard"),b=u(V,"start"),v=u(U,"truncate"),f=u(N,"auto"),w=u(I,"hidden");let r=class extends T{constructor(){super(...arguments),this.menuOpen=!1,this.menuTooLarge=!1,this.mobileMenu=!1,this.scrolled=!1,this.hiddenByScroll=!1,this.scrollProgress=0,this.showBurger=!1,this.layout=g.defaultValue,this.brandText="",this.brandLogo="",this.lightBrandLogo="",this.darkBrandLogo="",this.brandHref="",this.brandAlt="",this.brandColor="",this.lightBrandColor="",this.darkBrandColor="",this.brandAlign=b.defaultValue,this.brandWrap=v.defaultValue,this.menuDisplay=f.defaultValue,this.themeToggle=w.defaultValue,this.scrollBehavior="none",this.scrollThreshold=16,this.dockOffset=0,this.drawerTarget="",this.previewCollapseRequested=!1,this.fullBleedContent=!1,this.menuContainer=E(),this.menuButton=E(),this.menu=void 0,this.externalDrawerTarget=null,this.lastScrollY=0,this.lastInlineMenuWidth=0,this.mobileMenuQuery=null,this.menuDrawerListenersAttached=!1,this.observingMenuContainer=!1,this.scrollListenersAttached=!1,this.scrollRafId=null,this.resizeObserver=new ResizeObserver(()=>this.syncMenuLayout()),this.menuChildObserver=null,this.updateScrollState=()=>{this.scrollRafId===null&&(this.scrollRafId=requestAnimationFrame(()=>{this.scrollRafId=null,this.runScrollStateUpdate()}))},this.handleMobileMenuQueryChange=e=>{this.mobileMenu=e.matches,this.syncMenuLayout(),this.syncExternalDrawerControl()},this.toggleTheme=()=>{const e=this.getThemeRoot();if(!e)return;e.scheme=e.scheme==="dark"?"light":"dark";const t=e.scheme==="dark"?"dark":"light";this.dispatchEvent(new CustomEvent(R.ESP_THEME_TOGGLE,{detail:{scheme:t},bubbles:!0,composed:!0}))},this.handleMenuToggleClicked=()=>{if(this.menuOpen){this.closeNav();return}this.openNav()},this.onMenuDrawerOpened=()=>{this.menuOpen=!0,document.body.classList.add("menu-open"),this.burger&&(this.burger.menuOpen=!0)},this.onMenuDrawerClosed=()=>{this.menuOpen=!1,document.body.classList.remove("menu-open"),this.burger&&(this.burger.menuOpen=!1)}}syncMenuLayout(){if(!this.menuContainer.value||!this.menu||!this.menu.getWidth)return;const e=this.menuContainer.value.clientWidth,t=this.menu.getWidth();t>0&&(this.lastInlineMenuWidth=t);const o=this.lastInlineMenuWidth||t,s=this.getExternalDrawerTarget(),i=this.menuDisplay!=="inline",l=this.showBurger||this.menuDisplay==="drawer"||this.layout==="minimal"||this.previewCollapseRequested;this.menuTooLarge=i&&this.menuDisplay==="auto"&&o>e,this.menu.sliding=i&&!s&&this.hasDrawerableContent()&&(this.menuTooLarge||l||this.mobileMenu)}menuHasContent(){return!!(this.menu??this.querySelector(':scope > [slot="menu"]'))?.querySelector("esp-menu-item, esp-menu-group")}hasDrawerableContent(){return this.showBurger||!!this.getExternalDrawerTarget()||this.menuHasContent()}getExternalDrawerTarget(){if(!this.drawerTarget)return null;const e=document.getElementById(this.drawerTarget);return e===this.menu?null:e&&"openDrawer"in e&&typeof e.openDrawer=="function"&&"closeDrawer"in e&&typeof e.closeDrawer=="function"?e:null}getBurgerFocusTarget(){const t=this.shadowRoot?.querySelector("esp-header-button.menu-toggle")?.shadowRoot?.querySelector("button"),o=this.menuButton.value?.shadowRoot?.querySelector("button");return t??o??null}getScrollTokens(){const e=this.scrollBehavior.split(/\s+/).map(t=>t.trim().toLowerCase()).filter(Boolean);return new Set(e.filter(t=>t!=="none"))}getEffectiveScrollThreshold(){return Number.isFinite(this.scrollThreshold)?Math.max(0,this.scrollThreshold):0}clearScrollState(){this.scrolled=!1,this.hiddenByScroll=!1,this.scrollProgress=0}runScrollStateUpdate(){const e=this.getScrollTokens();if(!e.size){this.clearScrollState();return}const t=Math.max(0,window.scrollY||document.documentElement.scrollTop||0),o=this.getEffectiveScrollThreshold(),s=Number.isFinite(this.dockOffset)?Math.max(0,this.dockOffset):o,i=t>(e.has("dock")?s:o),l=t>this.lastScrollY,d=e.has("reveal")&&l&&t>o&&!this.menuOpen;if(this.scrolled=i,this.hiddenByScroll=d,e.has("progress")){const p=document.documentElement,y=Math.max(1,p.scrollHeight-window.innerHeight);this.scrollProgress=Math.min(1,t/y)}else this.scrollProgress=0;this.lastScrollY=t}cancelScrollUpdate(){this.scrollRafId!==null&&(cancelAnimationFrame(this.scrollRafId),this.scrollRafId=null)}syncScrollListeners(){const e=this.getScrollTokens().size>0;if(e&&!this.scrollListenersAttached?(window.addEventListener("scroll",this.updateScrollState,{passive:!0}),window.addEventListener("resize",this.updateScrollState,{passive:!0}),this.scrollListenersAttached=!0):!e&&this.scrollListenersAttached&&this.removeScrollListeners(),e){this.updateScrollState();return}this.cancelScrollUpdate(),this.clearScrollState()}removeScrollListeners(){this.scrollListenersAttached&&(window.removeEventListener("scroll",this.updateScrollState),window.removeEventListener("resize",this.updateScrollState),this.scrollListenersAttached=!1)}addMenuDrawerListeners(){!this.menu||this.menuDrawerListenersAttached||(this.menu.addEventListener("drawer-opened",this.onMenuDrawerOpened),this.menu.addEventListener("drawer-closed",this.onMenuDrawerClosed),this.menuDrawerListenersAttached=!0)}removeMenuDrawerListeners(){!this.menu||!this.menuDrawerListenersAttached||(this.menu.removeEventListener("drawer-opened",this.onMenuDrawerOpened),this.menu.removeEventListener("drawer-closed",this.onMenuDrawerClosed),this.menuDrawerListenersAttached=!1)}observeMenuContainer(){!this.menuContainer.value||this.observingMenuContainer||(this.resizeObserver.observe(this.menuContainer.value),this.observingMenuContainer=!0)}disconnectResizeObserver(){this.observingMenuContainer&&(this.resizeObserver.disconnect(),this.observingMenuContainer=!1)}observeMenuChildren(){!this.menu||this.menuChildObserver||(this.menuChildObserver=new MutationObserver(()=>{this.syncMenuLayout(),this.requestUpdate()}),this.menuChildObserver.observe(this.menu,{childList:!0,subtree:!0}))}syncMobileMenuQuery(){if("matchMedia"in window){if(!this.mobileMenuQuery){this.mobileMenuQuery=window.matchMedia(z),this.mobileMenu=this.mobileMenuQuery.matches,this.mobileMenuQuery.addEventListener("change",this.handleMobileMenuQueryChange);return}this.mobileMenu=this.mobileMenuQuery.matches}}getThemeRoot(){return this.traverseToClosest("esp-root")}syncExternalDrawerTarget(){const e=this.getExternalDrawerTarget(),t=e===this.menu?null:e;t!==this.externalDrawerTarget&&(this.externalDrawerTarget?.removeEventListener("drawer-opened",this.onMenuDrawerOpened),this.externalDrawerTarget?.removeEventListener("drawer-closed",this.onMenuDrawerClosed),this.externalDrawerTarget instanceof m&&(this.externalDrawerTarget.hasExternalDrawerControl=!1),this.externalDrawerTarget=t,this.externalDrawerTarget?.addEventListener("drawer-opened",this.onMenuDrawerOpened),this.externalDrawerTarget?.addEventListener("drawer-closed",this.onMenuDrawerClosed)),this.syncExternalDrawerControl()}burgerVisibleForTarget(){if(this.menuDisplay==="inline")return!1;const e=this.showBurger||this.menuDisplay==="drawer"||this.layout==="minimal"||this.previewCollapseRequested;return this.menuTooLarge||this.mobileMenu||e}syncExternalDrawerControl(){this.externalDrawerTarget instanceof m&&(this.externalDrawerTarget.hasExternalDrawerControl=this.burgerVisibleForTarget())}openNav(){const e=this.getBurgerFocusTarget(),t=this.getExternalDrawerTarget();if(this.burger&&(this.burger.menuOpen=!0),t){this.menuOpen=!0,t.openDrawer(e),document.body.classList.add("menu-open");return}if(this.menu){this.menu.sliding=!0,this.menuOpen=!0,this.menu.openDrawer(e),document.body.classList.add("menu-open");return}this.burger&&(this.burger.menuOpen=!1)}closeNav(){this.menuOpen=!1,this.burger&&(this.burger.menuOpen=!1);const e=this.getExternalDrawerTarget();if(e){e.closeDrawer(),document.body.classList.remove("menu-open");return}this.menu&&(this.menu.closeDrawer(),document.body.classList.remove("menu-open"))}get burger(){return this.menuButton.value??void 0}willUpdate(e){super.willUpdate(e),e.has("layout")&&!g.allowedValues.has(this.layout)&&(this.layout=g.defaultValue),e.has("brandAlign")&&!b.allowedValues.has(this.brandAlign)&&(this.brandAlign=b.defaultValue),e.has("brandWrap")&&!v.allowedValues.has(this.brandWrap)&&(this.brandWrap=v.defaultValue),e.has("menuDisplay")&&!f.allowedValues.has(this.menuDisplay)&&(this.menuDisplay=f.defaultValue),e.has("themeToggle")&&!w.allowedValues.has(this.themeToggle)&&(this.themeToggle=w.defaultValue)}firstUpdated(e){if(super.firstUpdated(e),!this.menuContainer.value)return;const s=(this.menuContainer.value.firstElementChild?.assignedElements()??[])[0];s instanceof m?(this.menu=s,this.addMenuDrawerListeners(),this.observeMenuChildren()):s&&console.warn("<esp-header>: the menu slot expects an <esp-menu> element, received",s),this.observeMenuContainer(),this.syncExternalDrawerTarget(),this.syncMobileMenuQuery(),this.syncScrollListeners(),this.syncMenuLayout()}updated(e){super.updated(e),(e.has("showBurger")||e.has("drawerTarget")||e.has("menuDisplay")||e.has("layout")||e.has("previewCollapseRequested"))&&(this.syncExternalDrawerTarget(),this.syncMenuLayout()),(e.has("mobileMenu")||e.has("menuTooLarge"))&&this.syncExternalDrawerControl(),e.has("scrollBehavior")?this.syncScrollListeners():(e.has("scrollThreshold")||e.has("dockOffset"))&&this.updateScrollState()}connectedCallback(){super.connectedCallback(),this.syncScrollListeners(),this.syncMobileMenuQuery(),this.addMenuDrawerListeners(),this.syncExternalDrawerTarget(),this.observeMenuContainer(),this.observeMenuChildren()}disconnectedCallback(){this.removeMenuDrawerListeners(),this.externalDrawerTarget?.removeEventListener("drawer-opened",this.onMenuDrawerOpened),this.externalDrawerTarget?.removeEventListener("drawer-closed",this.onMenuDrawerClosed),this.externalDrawerTarget instanceof m&&(this.externalDrawerTarget.hasExternalDrawerControl=!1),this.externalDrawerTarget=null,this.mobileMenuQuery?.removeEventListener("change",this.handleMobileMenuQueryChange),this.mobileMenuQuery=null,this.removeScrollListeners(),this.cancelScrollUpdate(),this.disconnectResizeObserver(),this.menuChildObserver?.disconnect(),this.menuChildObserver=null,super.disconnectedCallback()}render(){const{menuOpen:e,menuTooLarge:t,mobileMenu:o}=this,s=this.menuDisplay!=="inline",i=s&&(this.showBurger||this.menuDisplay==="drawer"||this.layout==="minimal"||this.previewCollapseRequested),l=this.getScrollTokens(),d=l.has("progress"),p=_({scheme:this.scheme,brandLogo:this.brandLogo,brandColor:this.brandColor,lightBrandLogo:this.lightBrandLogo,darkBrandLogo:this.darkBrandLogo,lightBrandColor:this.lightBrandColor,darkBrandColor:this.darkBrandColor}),y={"--_esp-header-brand-color":p.brandColor||null,"--_esp-header-scroll-progress":String(this.scrollProgress)},M={"menu-open":e,"too-wide":s&&this.hasDrawerableContent()&&(t||o||i),[`layout-${this.layout}`]:!0,"is-scrolled":this.scrolled,"hide-on-scroll":this.hiddenByScroll,"scroll-compact":l.has("compact"),"scroll-elevate":l.has("elevate"),"scroll-transparent":l.has("transparent")||l.has("transparent-to-solid"),"scroll-collapse-topbar":l.has("collapse-topbar")},C=this.scheme==="dark"?"light":"dark";return x`
|
|
2
2
|
<header class=${A(M)} style=${B(y)}>
|
|
3
3
|
<section class="topbar">
|
|
4
4
|
<slot name="topbar"></slot>
|
|
@@ -19,7 +19,7 @@ var n=function(h,e,t,o){var s=arguments.length,i=s<3?e:o===null?o=Object.getOwnP
|
|
|
19
19
|
${this.themeToggle==="visible"?x`<esp-header-button
|
|
20
20
|
class="theme-toggle"
|
|
21
21
|
icon=${this.scheme==="dark"?"sun":"moon"}
|
|
22
|
-
aria-label=${`Switch to ${
|
|
22
|
+
aria-label=${`Switch to ${C} mode`}
|
|
23
23
|
@clicked=${this.toggleTheme}
|
|
24
24
|
></esp-header-button>`:D}
|
|
25
25
|
<esp-header-button
|
|
@@ -35,7 +35,7 @@ var n=function(h,e,t,o){var s=arguments.length,i=s<3?e:o===null?o=Object.getOwnP
|
|
|
35
35
|
</section>
|
|
36
36
|
${d?x`<div class="scroll-progress" aria-hidden="true"></div>`:D}
|
|
37
37
|
</header>
|
|
38
|
-
`}};r.styles=[...T.styles,
|
|
38
|
+
`}};r.styles=[...T.styles,S`
|
|
39
39
|
:host {
|
|
40
40
|
--_esp-header-current-height: var(--esp-header-height, calc(4.5 * var(--esp-size-small)));
|
|
41
41
|
|
|
@@ -429,4 +429,4 @@ var n=function(h,e,t,o){var s=arguments.length,i=s<3?e:o===null?o=Object.getOwnP
|
|
|
429
429
|
transition: none;
|
|
430
430
|
}
|
|
431
431
|
}
|
|
432
|
-
`],n([c()],r.prototype,"menuOpen",void 0),n([c()],r.prototype,"menuTooLarge",void 0),n([c()],r.prototype,"mobileMenu",void 0),n([c()],r.prototype,"scrolled",void 0),n([c()],r.prototype,"hiddenByScroll",void 0),n([c()],r.prototype,"scrollProgress",void 0),n([a({attribute:"show-burger",type:Boolean})],r.prototype,"showBurger",void 0),n([a({converter:g.converter,reflect:!0})],r.prototype,"layout",void 0),n([a({attribute:"brand-text",type:String})],r.prototype,"brandText",void 0),n([a({attribute:"brand-logo",type:String})],r.prototype,"brandLogo",void 0),n([a({attribute:"light-brand-logo",type:String})],r.prototype,"lightBrandLogo",void 0),n([a({attribute:"dark-brand-logo",type:String})],r.prototype,"darkBrandLogo",void 0),n([a({attribute:"brand-href",type:String})],r.prototype,"brandHref",void 0),n([a({attribute:"brand-alt",type:String})],r.prototype,"brandAlt",void 0),n([a({attribute:"brand-color",type:String})],r.prototype,"brandColor",void 0),n([a({attribute:"light-brand-color",type:String})],r.prototype,"lightBrandColor",void 0),n([a({attribute:"dark-brand-color",type:String})],r.prototype,"darkBrandColor",void 0),n([a({attribute:"brand-align",converter:b.converter,reflect:!0})],r.prototype,"brandAlign",void 0),n([a({attribute:"brand-wrap",converter:
|
|
432
|
+
`],n([c()],r.prototype,"menuOpen",void 0),n([c()],r.prototype,"menuTooLarge",void 0),n([c()],r.prototype,"mobileMenu",void 0),n([c()],r.prototype,"scrolled",void 0),n([c()],r.prototype,"hiddenByScroll",void 0),n([c()],r.prototype,"scrollProgress",void 0),n([a({attribute:"show-burger",type:Boolean})],r.prototype,"showBurger",void 0),n([a({converter:g.converter,reflect:!0})],r.prototype,"layout",void 0),n([a({attribute:"brand-text",type:String})],r.prototype,"brandText",void 0),n([a({attribute:"brand-logo",type:String})],r.prototype,"brandLogo",void 0),n([a({attribute:"light-brand-logo",type:String})],r.prototype,"lightBrandLogo",void 0),n([a({attribute:"dark-brand-logo",type:String})],r.prototype,"darkBrandLogo",void 0),n([a({attribute:"brand-href",type:String})],r.prototype,"brandHref",void 0),n([a({attribute:"brand-alt",type:String})],r.prototype,"brandAlt",void 0),n([a({attribute:"brand-color",type:String})],r.prototype,"brandColor",void 0),n([a({attribute:"light-brand-color",type:String})],r.prototype,"lightBrandColor",void 0),n([a({attribute:"dark-brand-color",type:String})],r.prototype,"darkBrandColor",void 0),n([a({attribute:"brand-align",converter:b.converter,reflect:!0})],r.prototype,"brandAlign",void 0),n([a({attribute:"brand-wrap",converter:v.converter,reflect:!0})],r.prototype,"brandWrap",void 0),n([a({attribute:"menu-display",converter:f.converter,reflect:!0})],r.prototype,"menuDisplay",void 0),n([a({attribute:"theme-toggle",converter:w.converter,reflect:!0})],r.prototype,"themeToggle",void 0),n([a({attribute:"scroll-behavior",type:String})],r.prototype,"scrollBehavior",void 0),n([a({attribute:"scroll-threshold",type:Number})],r.prototype,"scrollThreshold",void 0),n([a({attribute:"dock-offset",type:Number})],r.prototype,"dockOffset",void 0),n([a({attribute:"drawer-target",type:String})],r.prototype,"drawerTarget",void 0),n([a({attribute:!1})],r.prototype,"previewCollapseRequested",void 0),n([a({attribute:"full-bleed-content",type:Boolean,reflect:!0})],r.prototype,"fullBleedContent",void 0),r=n([k("esp-header")],r);export{r as EspalierHeader};
|
package/dist/menu/esp-menu.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var n=function(
|
|
1
|
+
var n=function(p,e,r,o){var t=arguments.length,i=t<3?e:o===null?o=Object.getOwnPropertyDescriptor(e,r):o,s;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")i=Reflect.decorate(p,e,r,o);else for(var h=p.length-1;h>=0;h--)(s=p[h])&&(i=(t<3?s(i):t>3?s(e,r,i):s(e,r))||i);return t>3&&i&&Object.defineProperty(e,r,i),i};import{css as x,html as w,nothing as f}from"lit";import{customElement as E,property as l,state as g}from"lit/decorators.js";import{classMap as m}from"lit/directives/class-map.js";import{unsafeHTML as v}from"lit/directives/unsafe-html.js";import{createRef as d,ref as c}from"lit/directives/ref.js";import{EspalierElementBase as b}from"../shared/esp-element-base.js";import{getEspBus as D}from"../shared/bus-events.js";import{normalizePath as S,pathStartsWithSegment as y,pathsMatch as C}from"../shared/path-matching.js";import{SwipeRevealController as A}from"./swipe-reveal-controller.js";import"./esp-menu-item.js";import"./esp-menu-group.js";import{EspalierMenuItem as T}from"./esp-menu-item.js";import{EspalierMenuGroup as u}from"./esp-menu-group.js";const O="(max-width: 50em)";let a=class extends b{constructor(){super(),this.itemsSlot=d(),this.railRef=d(),this.scrimRef=d(),this.drawerRef=d(),this.bus=D(),this.closeTransitionTimer=null,this.drawerGroupOpenOverrides=new Map,this._sliding=!1,this._mobileCollapsed=!1,this.verticalDrawerQuery=null,this.onVerticalDrawerChange=e=>this.setMobileCollapsed(e.matches),this.mode="horizontal",this.overflow="auto",this.side="left",this.ariaLabel=null,this.autoExpand=!1,this.drawerOpen=!1,this.drawerTransitioning=!1,this.drawerTrigger=null,this.hasExternalDrawerControl=!1,this.previewCollapseRequested=!1,this.getWidth=()=>{const e=this.railRef.value;return e?Math.max(e.scrollWidth,e.clientWidth):-1},this.onDrawerTransitionEnd=()=>{this.closeTransitionTimer&&(clearTimeout(this.closeTransitionTimer),this.closeTransitionTimer=null),this.drawerTransitioning=!1,this.drawerOpen||(this.hideDrawerPopover(),this.drawerGroupOpenOverrides.clear())},this.swipeController=new A(this,this.side),this.swipeController.enabled=!1}get sliding(){return this._sliding}set sliding(e){const r=this._sliding;this._sliding=e,this.syncSwipeEnabled(),this.propagateToItems(),this.requestUpdate("sliding",r)}get collapsed(){return this.drawerActive}set collapsed(e){e?this.mode="drawer":this.mode==="drawer"&&(this.mode="vertical")}get drawerSide(){return this.overflow==="right-drawer"?"right":this.overflow==="left-drawer"?"left":this.side}get drawerActive(){return this.mode==="drawer"||this._sliding||this.overflow==="left-drawer"||this.overflow==="right-drawer"||this.mode==="vertical"&&(this._mobileCollapsed||this.previewCollapseRequested)&&this.hasExternalDrawerControl}get railMode(){return this.mode==="horizontal"?"horizontal":"vertical"}connectedCallback(){super.connectedCallback(),this.getAttribute("slot")==="right"&&(this.side="right"),!this.verticalDrawerQuery&&typeof window<"u"&&"matchMedia"in window&&(this.verticalDrawerQuery=window.matchMedia(O),this._mobileCollapsed=this.verticalDrawerQuery.matches,this.verticalDrawerQuery.addEventListener("change",this.onVerticalDrawerChange)),this.syncSwipeEnabled()}disconnectedCallback(){this.verticalDrawerQuery?.removeEventListener("change",this.onVerticalDrawerChange),this.verticalDrawerQuery=null,super.disconnectedCallback()}setMobileCollapsed(e){e!==this._mobileCollapsed&&(this._mobileCollapsed=e,this.mode==="vertical"&&this.applyMobileCollapse())}applyMobileCollapse(){this.swipeController.direction=this.drawerSide,this.syncSwipeEnabled(),this.propagateToItems(),this.requestUpdate(),!this.drawerActive&&this.drawerOpen&&this.swipeController.close(!0)}firstUpdated(e){super.firstUpdated(e),this.propagateToItems()}updated(e){super.updated(e),(e.has("mode")||e.has("overflow")||e.has("side")||e.has("hasExternalDrawerControl")||e.has("previewCollapseRequested"))&&(this.swipeController.direction=this.drawerSide,this.syncSwipeEnabled(),this.propagateToItems(),!this.drawerActive&&this.drawerOpen&&this.swipeController.close(!0)),this.autoExpand&&(e.has("autoExpand")||e.has("mode")&&this.mode!=="horizontal")?this.expandToCurrentPage():this.mode==="horizontal"&&e.has("mode")&&this.closeHorizontalTopLevelGroups()}openDrawer(e){this.drawerActive&&(e?this.drawerTrigger=e:this.drawerOpen||(this.drawerTrigger=null),this.swipeController.open())}closeDrawer(){this.swipeController.close(!0)}toggleDrawer(e){this.drawerOpen?this.closeDrawer():this.openDrawer(e)}toggleOpened(){this.toggleDrawer()}get isDrawerOpen(){return this.drawerOpen}syncSwipeEnabled(){this.swipeController.direction=this.drawerSide,this.swipeController.enabled=this.drawerActive}getAssignedChildren(){return this.itemsSlot.value?.assignedElements()??[]}propagateToItems(){const e=this.railMode;for(const r of this.getAssignedChildren())r instanceof T?(r.mode=e,r.depth=0,r.touchDevice=this.swipeController.isTouch):r instanceof u&&(r.mode=e,r.depth=0,r.touchDevice=this.swipeController.isTouch)}handleSlotChange(){this.propagateToItems()}onSwipeRevealChanged(e){e!==this.drawerOpen&&(this.drawerOpen=e,e?(this.drawerGroupOpenOverrides.clear(),this.bus.publish("close-popovers",{}),this.updateComplete.then(()=>this.showDrawerPopover())):(this.drawerTransitioning=!0,this.updateComplete.then(()=>this.startCloseTransition()),requestAnimationFrame(()=>this.restoreDrawerTriggerFocus())),this.dispatchEvent(new CustomEvent(e?"drawer-opened":"drawer-closed",{bubbles:!0,composed:!0})))}showDrawerPopover(){const e=this.scrimRef.value,r=this.drawerRef.value;if(!(!e||!r)){this.swipeController.drawerElement=r;try{e.showPopover(),r.showPopover()}catch{}r.getBoundingClientRect(),requestAnimationFrame(()=>{this.drawerTransitioning=!0,this.requestUpdate()})}}startCloseTransition(){if(!this.drawerRef.value){this.hideDrawerPopover();return}this.closeTransitionTimer&&clearTimeout(this.closeTransitionTimer),this.closeTransitionTimer=setTimeout(()=>{this.closeTransitionTimer=null,!this.drawerOpen&&this.drawerTransitioning&&this.onDrawerTransitionEnd()},400)}hideDrawerPopover(){const e=this.scrimRef.value,r=this.drawerRef.value;this.swipeController.drawerElement=null,r&&(r.style.cssText="");try{r?.hidePopover()}catch{}try{e?.hidePopover()}catch{}}restoreDrawerTriggerFocus(){const e=this.drawerTrigger;this.drawerTrigger=null,e?.isConnected&&e.focus({preventScroll:!0})}getAutoExpandedGroups(e=!0){const r=new Set;let o=null;for(const i of this.querySelectorAll("esp-menu-item")){const s=i.url||i.getAttribute("url");if(s&&C(s)){o=i;break}}if(!o)for(const i of this.querySelectorAll("esp-menu-group")){const s=i.url||i.getAttribute("url");if(s&&C(s)){o=i;break}}if(!o&&e){for(const i of this.querySelectorAll("esp-menu-group"))i.parentElement===this&&r.add(i);return r}if(!o)return r;o instanceof u&&r.add(o);let t=o.parentElement;for(;t&&t!==this;)t instanceof u&&r.add(t),t=t.parentElement;return r}isHorizontalTopLevelGroup(e){return e.mode==="horizontal"&&e.depth===0}groupUrlPrefixMatches(e){return y(location.pathname,e.urlPrefix)}groupPathMatches(e){if(this.groupUrlPrefixMatches(e))return!0;const r=e.url||e.getAttribute("url");return r?y(location.pathname,S(r)):!1}expandToCurrentPage(){const e=this.getAutoExpandedGroups(),r=this.querySelectorAll("esp-menu-group");for(const o of r)o.open=e.has(o)&&!this.isHorizontalTopLevelGroup(o)}closeHorizontalTopLevelGroups(){for(const e of this.querySelectorAll("esp-menu-group"))this.isHorizontalTopLevelGroup(e)&&(e.open=!1)}getDrawerAutoExpandedGroups(){return this.getAutoExpandedGroups(!1)}collectDrawerNodes(e,r=this.getDrawerAutoExpandedGroups()){const o=[];for(const t of e)if(t instanceof T){const i=t.querySelector(":scope > svg, :scope > img");o.push({kind:"item",label:t.label,url:t.url,open:!1,icon:t.icon,iconHtml:i?.outerHTML||"",children:[],originalItem:t,originalGroup:null})}else if(t instanceof u){const i=t.querySelector(':scope > [slot="icon"]'),s=r.has(t)||this.groupPathMatches(t),h=this.drawerGroupOpenOverrides.get(t)??(t.open||s);o.push({kind:"group",label:t.label,url:t.url||"",open:h,icon:t.icon,iconHtml:i?.outerHTML||"",children:this.collectDrawerNodes(Array.from(t.children),r),originalItem:null,originalGroup:t})}return o}renderDrawerNode(e){return e.kind==="item"?w`<esp-menu-item
|
|
2
2
|
label=${e.label}
|
|
3
3
|
.url=${e.url}
|
|
4
4
|
.icon=${e.icon}
|
|
@@ -167,4 +167,4 @@ var n=function(d,e,r,o){var t=arguments.length,i=t<3?e:o===null?o=Object.getOwnP
|
|
|
167
167
|
transition: none;
|
|
168
168
|
}
|
|
169
169
|
}
|
|
170
|
-
`],n([l({type:String,reflect:!0})],a.prototype,"mode",void 0),n([l({type:String,reflect:!0})],a.prototype,"overflow",void 0),n([l({type:String,reflect:!0})],a.prototype,"side",void 0),n([l({attribute:"aria-label",type:String})],a.prototype,"ariaLabel",void 0),n([l({type:Boolean,attribute:"auto-expand"})],a.prototype,"autoExpand",void 0),n([l({type:Boolean})],a.prototype,"sliding",null),n([l({type:Boolean})],a.prototype,"collapsed",null),n([g()],a.prototype,"drawerOpen",void 0),n([g()],a.prototype,"drawerTransitioning",void 0),n([l({attribute:!1})],a.prototype,"hasExternalDrawerControl",void 0),a=n([E("esp-menu")],a);export{a as EspalierMenu};
|
|
170
|
+
`],n([l({type:String,reflect:!0})],a.prototype,"mode",void 0),n([l({type:String,reflect:!0})],a.prototype,"overflow",void 0),n([l({type:String,reflect:!0})],a.prototype,"side",void 0),n([l({attribute:"aria-label",type:String})],a.prototype,"ariaLabel",void 0),n([l({type:Boolean,attribute:"auto-expand"})],a.prototype,"autoExpand",void 0),n([l({type:Boolean})],a.prototype,"sliding",null),n([l({type:Boolean})],a.prototype,"collapsed",null),n([g()],a.prototype,"drawerOpen",void 0),n([g()],a.prototype,"drawerTransitioning",void 0),n([l({attribute:!1})],a.prototype,"hasExternalDrawerControl",void 0),n([l({attribute:!1})],a.prototype,"previewCollapseRequested",void 0),a=n([E("esp-menu")],a);export{a as EspalierMenu};
|
package/dist/page/esp-page.d.ts
CHANGED
|
@@ -32,8 +32,29 @@ type HeaderPosition = "normal" | "sticky" | "fixed";
|
|
|
32
32
|
* </esp-page>
|
|
33
33
|
* ```
|
|
34
34
|
*
|
|
35
|
+
* A persistent preview uses spare trailing canvas first. Set a main-well
|
|
36
|
+
* floor to let it reclaim surface width, and opt into collapsing a directly
|
|
37
|
+
* paired header/sidebar navigation to its accessible burger/drawer mode:
|
|
38
|
+
*
|
|
39
|
+
* ```html
|
|
40
|
+
* <esp-page
|
|
41
|
+
* preview-open
|
|
42
|
+
* preview-collapse-sidebar
|
|
43
|
+
* style="--esp-page-preview-width: 20rem; --esp-page-preview-min-main-width: 900px;"
|
|
44
|
+
* >
|
|
45
|
+
* <esp-header slot="header" drawer-target="site-nav"></esp-header>
|
|
46
|
+
* <esp-menu id="site-nav" slot="sidebar" mode="vertical"></esp-menu>
|
|
47
|
+
* <article>Primary content</article>
|
|
48
|
+
* <aside slot="preview">Preview content</aside>
|
|
49
|
+
* </esp-page>
|
|
50
|
+
* ```
|
|
51
|
+
*
|
|
35
52
|
* @slot sidebar - Contextual navigation placed in the left aside.
|
|
36
53
|
* @slot right - Content to place in the right aside.
|
|
54
|
+
* @slot preview - Persistent preview content that uses spare right canvas
|
|
55
|
+
* width first, then optionally reclaims navigation and main-well width down
|
|
56
|
+
* to `--esp-page-preview-min-main-width`. Unlike flyout content, preview
|
|
57
|
+
* content is never replaced by the flyout request bus.
|
|
37
58
|
* @slot flyout - A transient `esp-flyout` panel that lives on the
|
|
38
59
|
* canvas, outside the content surface. Closed it costs no width; open
|
|
39
60
|
* it claims the right canvas gutter first — the surface keeps its
|
|
@@ -143,6 +164,12 @@ type HeaderPosition = "normal" | "sticky" | "fixed";
|
|
|
143
164
|
* for content that floats directly on the page with no frame.
|
|
144
165
|
* @cssprop --esp-page-flyout-width - The width of the open flyout
|
|
145
166
|
* track (and of the `esp-flyout` overlay drawer). Defaults to `20rem`.
|
|
167
|
+
* @cssprop --esp-page-preview-width - Width of the persistent preview
|
|
168
|
+
* panel. Defaults to `20rem`.
|
|
169
|
+
* @cssprop --esp-page-preview-min-main-width - Optional minimum width of
|
|
170
|
+
* the main content well while preview is reclaiming canvas/surface space.
|
|
171
|
+
* Unset by default, so preview uses spare canvas only. Set a length such
|
|
172
|
+
* as `900px` to opt into reclaim behavior.
|
|
146
173
|
* @cssprop --esp-page-fixed-header-offset - Offset reserved for fixed
|
|
147
174
|
* headers. Defaults to `var(--esp-header-height)`.
|
|
148
175
|
* @cssprop --esp-page-sticky-header-top - Top inset for sticky headers.
|
|
@@ -152,6 +179,8 @@ type HeaderPosition = "normal" | "sticky" | "fixed";
|
|
|
152
179
|
*
|
|
153
180
|
* @csspart canvas - The two canvas gutter regions flanking the surface.
|
|
154
181
|
* @csspart surface - The surface backdrop carrying the edge shadow/border.
|
|
182
|
+
* @csspart preview - The persistent preview complementary landmark.
|
|
183
|
+
* @csspart preview-content - The sticky wrapper around preview content.
|
|
155
184
|
*
|
|
156
185
|
* ```html
|
|
157
186
|
* <style>
|
|
@@ -205,6 +234,7 @@ type HeaderPosition = "normal" | "sticky" | "fixed";
|
|
|
205
234
|
export declare class EspalierPage extends EspalierElementBase {
|
|
206
235
|
constructor();
|
|
207
236
|
connectedCallback(): void;
|
|
237
|
+
disconnectedCallback(): void;
|
|
208
238
|
/**
|
|
209
239
|
* The layout mode of the page.
|
|
210
240
|
*
|
|
@@ -265,6 +295,35 @@ export declare class EspalierPage extends EspalierElementBase {
|
|
|
265
295
|
* Prefer `header-position="fixed"` for new code.
|
|
266
296
|
*/
|
|
267
297
|
fixedMenus: boolean;
|
|
298
|
+
/**
|
|
299
|
+
* Whether the persistent preview is logically open. The page may keep the
|
|
300
|
+
* preview hidden while space is unavailable; `preview-visible` reflects its
|
|
301
|
+
* actual presentation and the preview restores automatically when room returns.
|
|
302
|
+
*/
|
|
303
|
+
previewOpen: boolean;
|
|
304
|
+
/** Accessible name for the preview's complementary landmark. */
|
|
305
|
+
previewLabel: string;
|
|
306
|
+
/**
|
|
307
|
+
* Allow a directly slotted, safely linked vertical menu/header pair to
|
|
308
|
+
* collapse to its burger/drawer presentation when preview needs more room.
|
|
309
|
+
*/
|
|
310
|
+
previewCollapseSidebar: boolean;
|
|
311
|
+
/**
|
|
312
|
+
* Whether preview content is currently rendered. Managed by the page's
|
|
313
|
+
* space negotiation; consumers should treat this reflected property as read-only.
|
|
314
|
+
*/
|
|
315
|
+
previewVisible: boolean;
|
|
316
|
+
/**
|
|
317
|
+
* Whether preview is currently reserving width and allowing the main well
|
|
318
|
+
* to shrink toward `--esp-page-preview-min-main-width`. Managed by the page.
|
|
319
|
+
*/
|
|
320
|
+
previewReclaiming: boolean;
|
|
321
|
+
/** Request the persistent preview without moving focus. */
|
|
322
|
+
showPreview(): void;
|
|
323
|
+
/** Close the persistent preview without moving focus. */
|
|
324
|
+
closePreview(): void;
|
|
325
|
+
/** Toggle the persistent preview without moving focus. */
|
|
326
|
+
togglePreview(): void;
|
|
268
327
|
/**
|
|
269
328
|
* Inject an element into a div with the highest z-index so dialogs are
|
|
270
329
|
* rendered on top of everything else.
|
package/dist/page/esp-page.js
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
|
-
var
|
|
2
|
-
<div part="wrapper" class="esp-page ${
|
|
1
|
+
var p=function(u,t,e,a){var r=arguments.length,s=r<3?t:a===null?a=Object.getOwnPropertyDescriptor(t,e):a,i;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")s=Reflect.decorate(u,t,e,a);else for(var o=u.length-1;o>=0;o--)(i=u[o])&&(s=(r<3?i(s):r>3?i(t,e,s):i(t,e))||s);return r>3&&s&&Object.defineProperty(t,e,s),s};import{css as k,html as x,nothing as S}from"lit";import{customElement as P,property as l,state as C}from"lit/decorators.js";import{classMap as z}from"lit/directives/class-map.js";import{createRef as d,ref as h}from"lit/directives/ref.js";import{EspalierElementBase as f}from"../shared/esp-element-base.js";import{BiDirectionalStickyController as g}from"./bi-directional-sticky-controller.js";import{getEspBus as R}from"../shared/bus-events.js";import"../toaster/esp-toaster.js";const w='esp-footer, footer, [role~="contentinfo"]',_="(max-width: 50em)",c=1;let n=class extends f{constructor(){super(),this.dialogZone=d(),this.flyoutSlot=d(),this.footerSlot=d(),this.previewSlot=d(),this.previewSpace=d(),this.previewWidthProbe=d(),this.previewMainMinProbe=d(),this.previewObservedWidths=new WeakMap,this.previewSyncRaf=null,this.previewSyncGeneration=0,this.previewSyncTask=Promise.resolve(),this.previewHeader=null,this.previewMenu=null,this.previewCollapsedSidebarWidth=0,this.footerWrapperIsLandmark=!0,this.schedulePreviewLayout=()=>{if(!this.isConnected||!this.hasUpdated)return;this.previewSyncGeneration+=1;const t=this.previewSyncGeneration;this.previewSyncRaf!==null&&cancelAnimationFrame(this.previewSyncRaf),this.previewSyncRaf=requestAnimationFrame(()=>{this.previewSyncRaf=null,this.previewSyncTask=this.previewSyncTask.then(()=>this.syncPreviewLayout(t)).catch(()=>{})})},this.onPreviewMediaChange=()=>this.schedulePreviewLayout(),this.onPreviewResize=t=>{t.some(a=>{const r=a.contentRect.width,s=this.previewObservedWidths.get(a.target);return this.previewObservedWidths.set(a.target,r),s===void 0||Math.abs(s-r)>.25})&&this.schedulePreviewLayout()},this.kind="wide",this.align="start",this.contained=!1,this.headerPosition="normal",this.fixedMenus=!1,this.previewOpen=!1,this.previewLabel="Preview",this.previewCollapseSidebar=!1,this.previewVisible=!1,this.previewReclaiming=!1,new g(this,".esp-page-left > .sticky-wrapper"),new g(this,".esp-page-right > .sticky-wrapper"),new g(this,".esp-page-flyout > .sticky-wrapper"),new g(this,".esp-page-preview > .sticky-wrapper"),this.addEventListener("flyout-state-changed",t=>this.syncFlyoutState(t))}connectedCallback(){const t=Array.from(this.children).filter(e=>e.getAttribute("slot")==="footer");this.footerWrapperIsLandmark=!t.some(e=>this.footerElementProvidesLandmark(e)),super.connectedCallback(),this.hasUpdated&&queueMicrotask(()=>this.setupPreviewLayoutObserver())}disconnectedCallback(){this.previewResizeObserver?.disconnect(),this.previewResizeObserver=void 0,this.previewMediaQuery?.removeEventListener("change",this.onPreviewMediaChange),this.previewMediaQuery=void 0,this.previewSyncRaf!==null&&(cancelAnimationFrame(this.previewSyncRaf),this.previewSyncRaf=null),this.previewSyncGeneration+=1,this.toggleAttribute("data-preview-measuring",!1),this.setPreviewLayoutState(!1,!1),this.setPreviewNavigationCollapse(!1),super.disconnectedCallback()}syncFlyoutState(t){if(t&&t.target?.closest?.("esp-page")!==this)return;const e=i=>{const o=i.mode;return(typeof o=="string"?o:i.getAttribute("mode"))==="overlay"},a=i=>{const o=i.open;return typeof o=="boolean"?o:i.hasAttribute("open")},r=i=>i.anchor!=null,s=(this.flyoutSlot.value?.assignedElements()??[]).filter(i=>i.tagName==="ESP-FLYOUT");this.toggleAttribute("flyout-open",s.some(i=>a(i)&&!e(i))),this.toggleAttribute("flyout-overlay-open",s.some(i=>a(i)&&e(i))),this.toggleAttribute("flyout-anchored",s.some(i=>a(i)&&r(i))),this.schedulePreviewLayout()}previewHasContent(){const t=this.previewSlot.value?.assignedNodes({flatten:!0});return t?t.some(e=>e.nodeType===Node.ELEMENT_NODE||(e.textContent?.trim().length??0)>0):Array.from(this.childNodes).some(e=>e instanceof Element&&e.getAttribute("slot")==="preview"&&!e.hasAttribute("hidden"))}getPreviewNavigationPair(){if(!this.previewCollapseSidebar)return null;const t=Array.from(this.children),e=t.find(i=>i.slot==="header"&&i.tagName==="ESP-HEADER"),a=t.find(i=>i.slot==="sidebar"&&i.tagName==="ESP-MENU");if(!e||!a||!a.id)return null;const r=typeof e.drawerTarget=="string"?e.drawerTarget:e.getAttribute("drawer-target")??"",s=typeof a.mode=="string"?a.mode:a.getAttribute("mode");return r!==a.id||s!=="vertical"||!("previewCollapseRequested"in e)||!("previewCollapseRequested"in a)?null:{header:e,menu:a}}async setPreviewNavigationCollapse(t){const e=t?this.getPreviewNavigationPair():null,a=e!==null&&this.previewHeader===e.header&&this.previewMenu===e.menu,r=this.previewHeader&&this.previewHeader!==e?.header?this.previewHeader:null,s=this.previewMenu&&this.previewMenu!==e?.menu?this.previewMenu:null;if(r&&(r.previewCollapseRequested=!1),s&&(s.previewCollapseRequested=!1),this.previewHeader=e?.header??null,this.previewMenu=e?.menu??null,this.toggleAttribute("data-preview-navigation-collapsed",!1),await r?.updateComplete,await s?.updateComplete,!e)return this.previewCollapsedSidebarWidth=0,!1;const i=a?this.previewCollapsedSidebarWidth:this.shadowRoot?.querySelector(".esp-page-left")?.getBoundingClientRect().width??0;return e.header.previewCollapseRequested=!0,e.menu.previewCollapseRequested=!0,await e.header.updateComplete,await e.menu.updateComplete,e.menu.hasExternalDrawerControl===!0?(this.previewCollapsedSidebarWidth=i,this.toggleAttribute("data-preview-navigation-collapsed",!0),!0):(e.header.previewCollapseRequested=!1,e.menu.previewCollapseRequested=!1,await e.header.updateComplete,await e.menu.updateComplete,this.previewHeader=null,this.previewMenu=null,this.previewCollapsedSidebarWidth=0,!1)}previewTokenIsConfigured(){return getComputedStyle(this).getPropertyValue("--esp-page-preview-min-main-width").trim().length>0}setPreviewLayoutState(t,e){this.previewVisible=t,this.previewReclaiming=t&&e}previewFitsWithinPage(t,e){const a=this.shadowRoot?.querySelector(".esp-page-main"),r=this.shadowRoot?.querySelector(".esp-page-preview");if(!a||!r)return!1;const s=this.getBoundingClientRect(),i=a.getBoundingClientRect(),o=r.getBoundingClientRect();return i.width+c>=t&&o.width+c>=e&&o.left+c>=s.left&&o.right<=s.right+c}async syncPreviewLayout(t){if(t!==this.previewSyncGeneration||!this.isConnected)return;let e=!1;this.toggleAttribute("data-preview-measuring",!0);try{const a=this.previewOpen&&this.previewHasContent(),r=this.previewMediaQuery?.matches??!1,s=this.hasAttribute("flyout-overlay-open"),i=this.hasAttribute("data-preview-navigation-collapsed")?this.previewCollapsedSidebarWidth:0;if(this.setPreviewLayoutState(!1,!1),this.toggleAttribute("data-preview-navigation-collapsed",!1),await this.updateComplete,t!==this.previewSyncGeneration||!a||r||s)return;const o=this.previewWidthProbe.value?.getBoundingClientRect().width??0,m=this.previewSpace.value?.getBoundingClientRect().width??0,y=Math.max(0,m-i);if(o<=0)return;if(y+c>=o){this.setPreviewLayoutState(!0,!1);return}if(!this.previewTokenIsConfigured())return;const v=this.previewMainMinProbe.value?.getBoundingClientRect().width??0;if(v<=0||(e=await this.setPreviewNavigationCollapse(this.previewCollapseSidebar),t!==this.previewSyncGeneration)||(this.setPreviewLayoutState(!0,!0),await new Promise(b=>requestAnimationFrame(()=>b())),t!==this.previewSyncGeneration))return;this.previewFitsWithinPage(v,o)||(this.setPreviewLayoutState(!1,!1),e=!1)}finally{t===this.previewSyncGeneration&&!e&&await this.setPreviewNavigationCollapse(!1),t===this.previewSyncGeneration&&this.toggleAttribute("data-preview-measuring",!1)}}setupPreviewLayoutObserver(){this.isConnected&&(!this.previewMediaQuery&&typeof window.matchMedia=="function"&&(this.previewMediaQuery=window.matchMedia(_),this.previewMediaQuery.addEventListener("change",this.onPreviewMediaChange)),!this.previewResizeObserver&&typeof ResizeObserver<"u"&&(this.previewResizeObserver=new ResizeObserver(this.onPreviewResize),this.previewResizeObserver.observe(this),this.previewWidthProbe.value&&this.previewResizeObserver.observe(this.previewWidthProbe.value),this.previewMainMinProbe.value&&this.previewResizeObserver.observe(this.previewMainMinProbe.value)),this.schedulePreviewLayout())}footerElementProvidesLandmark(t){return t.matches(w)||t.querySelector(w)!==null}syncFooterLandmark(){const e=(this.footerSlot.value?.assignedElements({flatten:!0})??[]).some(a=>this.footerElementProvidesLandmark(a));this.footerWrapperIsLandmark=!e}showPreview(){this.previewOpen=!0}closePreview(){this.previewOpen=!1}togglePreview(){this.previewOpen=!this.previewOpen}AddDialog(t){this.dialogZone.value?.appendChild(t)}firstUpdated(t){super.firstUpdated(t),this.syncFlyoutState(),this.setupPreviewLayoutObserver()}updated(t){super.updated(t),(t.has("fixedMenus")||t.has("headerPosition"))&&R().publish("fixed-menus-changed",{fixed:this.fixedMenus||this.headerPosition==="fixed"}),(t.has("previewOpen")||t.has("previewCollapseSidebar"))&&this.schedulePreviewLayout()}render(){const t=this.fixedMenus||this.headerPosition==="fixed",e=!t&&this.headerPosition==="sticky";return x`
|
|
2
|
+
<div part="wrapper" class="esp-page ${z({"fixed-menus":t,"fixed-header":t,"sticky-header":e})}">
|
|
3
3
|
<div part="canvas" class="esp-page-canvas esp-page-canvas--left" aria-hidden="true"></div>
|
|
4
4
|
<div part="canvas" class="esp-page-canvas esp-page-canvas--right" aria-hidden="true"></div>
|
|
5
5
|
<div part="surface" class="esp-page-surface" aria-hidden="true"></div>
|
|
6
6
|
<div class="esp-page-top">
|
|
7
|
-
<slot name="header"></slot>
|
|
7
|
+
<slot name="header" @slotchange=${this.schedulePreviewLayout}></slot>
|
|
8
8
|
</div>
|
|
9
9
|
<aside class="esp-page-left">
|
|
10
10
|
<div class="sticky-wrapper">
|
|
11
|
-
<slot name="sidebar"></slot>
|
|
11
|
+
<slot name="sidebar" @slotchange=${this.schedulePreviewLayout}></slot>
|
|
12
12
|
</div>
|
|
13
13
|
</aside>
|
|
14
14
|
<div class="esp-page-main">
|
|
@@ -23,18 +23,39 @@ var i=function(h,e,a,s){var d=arguments.length,o=d<3?e:s===null?s=Object.getOwnP
|
|
|
23
23
|
<div class="sticky-wrapper">
|
|
24
24
|
<slot
|
|
25
25
|
name="flyout"
|
|
26
|
-
${
|
|
26
|
+
${h(this.flyoutSlot)}
|
|
27
27
|
@slotchange=${()=>this.syncFlyoutState()}
|
|
28
28
|
></slot>
|
|
29
29
|
</div>
|
|
30
30
|
</div>
|
|
31
|
-
<div
|
|
32
|
-
|
|
31
|
+
<div
|
|
32
|
+
class="esp-page-preview-width-probe"
|
|
33
|
+
aria-hidden="true"
|
|
34
|
+
${h(this.previewWidthProbe)}
|
|
35
|
+
></div>
|
|
36
|
+
<div
|
|
37
|
+
class="esp-page-preview-main-min-probe"
|
|
38
|
+
aria-hidden="true"
|
|
39
|
+
${h(this.previewMainMinProbe)}
|
|
40
|
+
></div>
|
|
41
|
+
<div class="esp-page-preview-space" ${h(this.previewSpace)}>
|
|
42
|
+
<aside part="preview" class="esp-page-preview" aria-label=${this.previewLabel}>
|
|
43
|
+
<div part="preview-content" class="sticky-wrapper">
|
|
44
|
+
<slot
|
|
45
|
+
name="preview"
|
|
46
|
+
${h(this.previewSlot)}
|
|
47
|
+
@slotchange=${this.schedulePreviewLayout}
|
|
48
|
+
></slot>
|
|
49
|
+
</div>
|
|
50
|
+
</aside>
|
|
33
51
|
</div>
|
|
34
|
-
<div
|
|
52
|
+
<div class="esp-page-footer" role=${this.footerWrapperIsLandmark?"contentinfo":S}>
|
|
53
|
+
<slot name="footer" ${h(this.footerSlot)} @slotchange=${this.syncFooterLandmark}></slot>
|
|
54
|
+
</div>
|
|
55
|
+
<div id="dialog-drop-zone" ${h(this.dialogZone)}></div>
|
|
35
56
|
<esp-toaster></esp-toaster>
|
|
36
57
|
</div>
|
|
37
|
-
`}};
|
|
58
|
+
`}};n.styles=[...f.styles,k`
|
|
38
59
|
:host {
|
|
39
60
|
--_esp-page-resolved-max-width: var(--esp-page-max-width, 1536px);
|
|
40
61
|
|
|
@@ -45,6 +66,8 @@ var i=function(h,e,a,s){var d=arguments.length,o=d<3?e:s===null?s=Object.getOwnP
|
|
|
45
66
|
|
|
46
67
|
--_esp-page-flyout-min: 0px;
|
|
47
68
|
|
|
69
|
+
--_esp-page-preview-min: 0px;
|
|
70
|
+
|
|
48
71
|
--_esp-page-surface-edge-shadow: 0.75rem 0 1.5rem -0.75rem var(--esp-color-shadow);
|
|
49
72
|
|
|
50
73
|
--_esp-page-surface-shadow: var(
|
|
@@ -88,11 +111,31 @@ var i=function(h,e,a,s){var d=arguments.length,o=d<3?e:s===null?s=Object.getOwnP
|
|
|
88
111
|
--_esp-page-flyout-min: var(--esp-page-flyout-width, 20rem);
|
|
89
112
|
}
|
|
90
113
|
|
|
114
|
+
:host([preview-reclaiming]) {
|
|
115
|
+
--_esp-page-preview-min: var(--esp-page-preview-width, 20rem);
|
|
116
|
+
--_esp-page-main-track: minmax(
|
|
117
|
+
var(--esp-page-preview-min-main-width, 0px),
|
|
118
|
+
var(--_esp-page-resolved-max-width)
|
|
119
|
+
);
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
:host([kind="full"][preview-reclaiming]) {
|
|
123
|
+
--_esp-page-main-track: minmax(var(--esp-page-preview-min-main-width, 0px), 1fr);
|
|
124
|
+
}
|
|
125
|
+
|
|
91
126
|
|
|
92
127
|
@media (max-width: 50em) {
|
|
93
128
|
:host([flyout-open]) {
|
|
94
129
|
--_esp-page-flyout-min: 0px;
|
|
95
130
|
}
|
|
131
|
+
|
|
132
|
+
:host([preview-reclaiming]) {
|
|
133
|
+
--_esp-page-preview-min: 0px;
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
.esp-page > .esp-page-preview-space {
|
|
137
|
+
display: none;
|
|
138
|
+
}
|
|
96
139
|
}
|
|
97
140
|
|
|
98
141
|
|
|
@@ -175,6 +218,20 @@ var i=function(h,e,a,s){var d=arguments.length,o=d<3?e:s===null?s=Object.getOwnP
|
|
|
175
218
|
position: absolute;
|
|
176
219
|
}
|
|
177
220
|
|
|
221
|
+
:host([preview-visible]) .esp-page > div.esp-page-preview-space > .esp-page-preview {
|
|
222
|
+
display: block;
|
|
223
|
+
}
|
|
224
|
+
|
|
225
|
+
|
|
226
|
+
:host([data-preview-navigation-collapsed]) .esp-page > aside.esp-page-left {
|
|
227
|
+
inline-size: 0;
|
|
228
|
+
min-inline-size: 0;
|
|
229
|
+
}
|
|
230
|
+
|
|
231
|
+
:host([data-preview-measuring]) .esp-page {
|
|
232
|
+
transition: none;
|
|
233
|
+
}
|
|
234
|
+
|
|
178
235
|
.esp-page {
|
|
179
236
|
|
|
180
237
|
min-height: 100vh;
|
|
@@ -186,7 +243,7 @@ var i=function(h,e,a,s){var d=arguments.length,o=d<3?e:s===null?s=Object.getOwnP
|
|
|
186
243
|
[left-end main-start] var(--_esp-page-main-track)
|
|
187
244
|
[main-end right-start] min-content
|
|
188
245
|
[right-end surface-end canvas-right-start flyout-start] minmax(
|
|
189
|
-
var(--_esp-page-flyout-min),
|
|
246
|
+
calc(var(--_esp-page-flyout-min) + var(--_esp-page-preview-min)),
|
|
190
247
|
var(--_esp-page-gutter-right)
|
|
191
248
|
)
|
|
192
249
|
[flyout-end canvas-right-end full-end];
|
|
@@ -272,6 +329,41 @@ var i=function(h,e,a,s){var d=arguments.length,o=d<3?e:s===null?s=Object.getOwnP
|
|
|
272
329
|
}
|
|
273
330
|
|
|
274
331
|
|
|
332
|
+
> div.esp-page-preview-space {
|
|
333
|
+
grid-column: flyout;
|
|
334
|
+
grid-row: content;
|
|
335
|
+
z-index: 4;
|
|
336
|
+
position: relative;
|
|
337
|
+
min-inline-size: 0;
|
|
338
|
+
margin-inline-start: var(--_esp-page-flyout-min);
|
|
339
|
+
|
|
340
|
+
> .esp-page-preview {
|
|
341
|
+
display: none;
|
|
342
|
+
inline-size: var(--esp-page-preview-width, 20rem);
|
|
343
|
+
max-inline-size: 100%;
|
|
344
|
+
position: relative;
|
|
345
|
+
}
|
|
346
|
+
}
|
|
347
|
+
|
|
348
|
+
|
|
349
|
+
> .esp-page-preview-width-probe,
|
|
350
|
+
> .esp-page-preview-main-min-probe {
|
|
351
|
+
position: absolute;
|
|
352
|
+
block-size: 0;
|
|
353
|
+
visibility: hidden;
|
|
354
|
+
pointer-events: none;
|
|
355
|
+
contain: strict;
|
|
356
|
+
}
|
|
357
|
+
|
|
358
|
+
> .esp-page-preview-width-probe {
|
|
359
|
+
inline-size: var(--esp-page-preview-width, 20rem);
|
|
360
|
+
}
|
|
361
|
+
|
|
362
|
+
> .esp-page-preview-main-min-probe {
|
|
363
|
+
inline-size: var(--esp-page-preview-min-main-width, 0px);
|
|
364
|
+
}
|
|
365
|
+
|
|
366
|
+
|
|
275
367
|
> .esp-page-canvas {
|
|
276
368
|
|
|
277
369
|
grid-row: top-start / footer-end;
|
|
@@ -359,6 +451,7 @@ var i=function(h,e,a,s){var d=arguments.length,o=d<3?e:s===null?s=Object.getOwnP
|
|
|
359
451
|
> aside.esp-page-left,
|
|
360
452
|
> aside.esp-page-right,
|
|
361
453
|
> div.esp-page-flyout,
|
|
454
|
+
> div.esp-page-preview-space,
|
|
362
455
|
> .esp-page-surface,
|
|
363
456
|
> .esp-page-canvas {
|
|
364
457
|
margin-top: var(--_esp-page-fixed-header-offset);
|
|
@@ -394,4 +487,4 @@ var i=function(h,e,a,s){var d=arguments.length,o=d<3?e:s===null?s=Object.getOwnP
|
|
|
394
487
|
transition: none;
|
|
395
488
|
}
|
|
396
489
|
}
|
|
397
|
-
`],
|
|
490
|
+
`],p([C()],n.prototype,"footerWrapperIsLandmark",void 0),p([l({reflect:!0})],n.prototype,"kind",void 0),p([l({reflect:!0})],n.prototype,"align",void 0),p([l({type:Boolean,reflect:!0})],n.prototype,"contained",void 0),p([l({attribute:"header-position",reflect:!0})],n.prototype,"headerPosition",void 0),p([l({attribute:"fixed-menus",type:Boolean,reflect:!0})],n.prototype,"fixedMenus",void 0),p([l({attribute:"preview-open",type:Boolean,reflect:!0})],n.prototype,"previewOpen",void 0),p([l({attribute:"preview-label",type:String,reflect:!0})],n.prototype,"previewLabel",void 0),p([l({attribute:"preview-collapse-sidebar",type:Boolean,reflect:!0})],n.prototype,"previewCollapseSidebar",void 0),p([l({attribute:"preview-visible",type:Boolean,reflect:!0})],n.prototype,"previewVisible",void 0),p([l({attribute:"preview-reclaiming",type:Boolean,reflect:!0})],n.prototype,"previewReclaiming",void 0),n=p([P("esp-page")],n);export{n as EspalierPage};
|
|
@@ -1639,6 +1639,18 @@
|
|
|
1639
1639
|
"component": "esp-page",
|
|
1640
1640
|
"description": "The maximum width of the main content well. Set automatically by the `kind` attribute: `1536px` (wide), `768px` (narrow), or `none` (full). This cap now sizes the main grid track; surplus width beyond it becomes the canvas gutters."
|
|
1641
1641
|
},
|
|
1642
|
+
{
|
|
1643
|
+
"name": "--esp-page-preview-min-main-width",
|
|
1644
|
+
"category": "component",
|
|
1645
|
+
"component": "esp-page",
|
|
1646
|
+
"description": "Optional minimum width of the main content well while preview is reclaiming canvas/surface space. Unset by default, so preview uses spare canvas only. Set a length such as `900px` to opt into reclaim behavior."
|
|
1647
|
+
},
|
|
1648
|
+
{
|
|
1649
|
+
"name": "--esp-page-preview-width",
|
|
1650
|
+
"category": "component",
|
|
1651
|
+
"component": "esp-page",
|
|
1652
|
+
"description": "Width of the persistent preview panel. Defaults to `20rem`."
|
|
1653
|
+
},
|
|
1642
1654
|
{
|
|
1643
1655
|
"name": "--esp-page-sticky-header-top",
|
|
1644
1656
|
"category": "component",
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@taprootio/espalier",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.10.0",
|
|
4
4
|
"packageManager": "bun@1.3.12",
|
|
5
5
|
"description": "Espalier — a themeable, accessible, framework-agnostic, enterprise-grade design system built on web standards and love.",
|
|
6
6
|
"customElements": "custom-elements.json",
|