@jrgermain/stylesheet 0.16.1 → 0.17.1
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/dist/enhance.js +1 -1
- package/dist/enhance.js.map +3 -3
- package/dist/stylesheet.css +1 -1
- package/dist/stylesheet.css.map +1 -1
- package/dist/tokens.d.ts +9 -3
- package/dist/tokens.js +8 -2
- package/dist/tokens.js.map +2 -2
- package/package.json +1 -1
package/dist/enhance.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";(async function(){if(typeof window>"u"||typeof document>"u"){console.warn("The Progressive Enhancements script was loaded in a non-browser environment. It's designed to run exclusively in the browser, so it won't do anything here.");return}await new Promise(e=>{document.readyState!=="complete"?window.addEventListener("load",()=>e()):e()});const
|
|
1
|
+
"use strict";(async function(){if(typeof window>"u"||typeof document>"u"){console.warn("The Progressive Enhancements script was loaded in a non-browser environment. It's designed to run exclusively in the browser, so it won't do anything here.");return}await new Promise(e=>{document.readyState!=="complete"?window.addEventListener("load",()=>e()):e()});const o=document.querySelector("html"),r=document.querySelector(".app"),c=document.querySelector(".app-body"),d=document.querySelector(".app-content"),l=document.querySelector(".app-header-content"),i=document.querySelector(".app-sidebar-content"),m=document.querySelector(".app-sidebar-toggle input[type='checkbox']"),g=window.matchMedia("(width < 55rem)"),u=()=>o!=null&&d!=null&&d.getBoundingClientRect().bottom>o.clientHeight,h=()=>r!=null&&window.getComputedStyle(r).overflowY==="hidden",n=()=>{const e=u()&&h();l&&(l.dataset.jrgScrollGutter=String(e)),d&&(d.dataset.jrgScrollGutter=String(e))},p=()=>{r&&(r.dataset.jrgJsEnabled="true")},s=()=>{if(!o||!i||!c)return;if(g.matches){i.style.height="";return}const e=Math.max(0,c.getBoundingClientRect().top),a=o.clientHeight,t=Math.floor(a-e);i.style.height=`${t}px`};window.addEventListener("resize",s),window.addEventListener("resize",n),window.addEventListener("scroll",()=>{u()&&s()}),m?.addEventListener("change",n),document.querySelectorAll("dialog.modal, dialog.drawer").forEach(e=>{e.addEventListener("toggle",n)}),new MutationObserver(e=>{for(const a of e)for(const t of a.addedNodes)t instanceof HTMLDialogElement&&(t.classList.contains("modal")||t.classList.contains("drawer"))&&t.addEventListener("toggle",n)}).observe(document.body,{childList:!0,subtree:!0}),s(),n(),p()})().catch(console.error);
|
|
2
2
|
//# sourceMappingURL=enhance.js.map
|
package/dist/enhance.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../src/enhance.ts"],
|
|
4
|
-
"sourcesContent": ["// --------------------------------------------------------------------------------------\n// Enhancements\n// --------------------------------------------------------------------------------------\n// This script adds small UX tweaks for users with JavaScript enabled. In the spirit of\n// progressive enhancement, sites will be fully functional without it.\n//\n// This script does the following:\n// - Prevents layout shift when Modal, Drawer, and mobile Sidebar are opened\n// - Makes Sidebar fill available vertical space when Header is scrolled in/out of view\n// - Enables use of the `if-js-enabled` and `if-js-disabled` utility classes\n// --------------------------------------------------------------------------------------\n\n(async function () {\n /////////////////////////////\n // Initialize //\n /////////////////////////////\n\n // Ensure we're in a browser environment and exit early if not\n if (typeof window === \"undefined\" || typeof document === \"undefined\") {\n console.warn(\n \"The Progressive Enhancements script was loaded in a non-browser environment. It's designed to run exclusively in the browser, so it won't do anything here.\",\n );\n return;\n }\n\n // Wait for document to be done loading before we continue\n await new Promise<void>((resolve) => {\n if (document.readyState !== \"complete\") {\n window.addEventListener(\"load\", () => resolve());\n } else {\n resolve();\n }\n });\n\n /////////////////////////////\n // Globals & Utils //\n /////////////////////////////\n\n const $root = document.querySelector(\"html\");\n const $app = document.querySelector<HTMLElement>(\".app\");\n const $appBody = document.querySelector<HTMLElement>(\".app-body\");\n const $appContent = document.querySelector<HTMLElement>(\".app-content\");\n const $headerContent = document.querySelector<HTMLElement>(\n \".app-header-content\",\n );\n const $sidebarContent = document.querySelector<HTMLElement>(\n \".app-sidebar-content\",\n );\n const $sidebarToggle = document.querySelector<HTMLInputElement>(\n \".app-sidebar-toggle input[type='checkbox']\",\n );\n\n const smallWidthMediaQuery = window.matchMedia(\"(width < 55rem)\");\n\n const hasVerticalOverflow = () =>\n $root != null &&\n $appContent != null &&\n $appContent.getBoundingClientRect().bottom > $root.clientHeight;\n\n const isOverflowHidden = () =>\n $app != null && window.getComputedStyle($app).overflowY === \"hidden\";\n\n //////////////////////////////\n // Define Enhancements //\n //////////////////////////////\n\n const setScrollGutter = () => {\n const shouldReserveGutter = hasVerticalOverflow() && isOverflowHidden();\n\n if ($headerContent) {\n $headerContent.dataset.jrgScrollGutter = String(shouldReserveGutter);\n }\n if ($appContent) {\n $appContent.dataset.jrgScrollGutter = String(shouldReserveGutter);\n }\n };\n\n const setJsEnabled = () => {\n if ($app) {\n $app.dataset.jrgJsEnabled = \"true\";\n }\n };\n\n const setSidebarHeight = () => {\n // Ensure all necessary elements are present\n if (!$root || !$sidebarContent || !$appBody) {\n return;\n }\n\n // On narrow viewports (where sidebar is an overlay), remove the inline style for height\n if (smallWidthMediaQuery.matches) {\n $sidebarContent.style.height = \"\";\n return;\n }\n\n // On medium and wide viewports, resize the sidebar to fill available vertical space\n const start = Math.max(0, $appBody.getBoundingClientRect().top);\n const end = $root.clientHeight;\n const availableHeight = Math.floor(end - start);\n $sidebarContent.style.height = `${availableHeight}px`;\n };\n\n //////////////////////////////\n // Set Up Listeners & Run //\n //////////////////////////////\n\n // Resize listeners\n window.addEventListener(\"resize\", setSidebarHeight);\n window.addEventListener(\"resize\", setScrollGutter);\n\n // Scroll listener\n window.addEventListener(\"scroll\", () => {\n // Only resize the sidebar if the body content overflows the page. This\n // prevents weird behavior when the browser has elastic scrolling.\n if (hasVerticalOverflow()) setSidebarHeight();\n });\n\n // Attach sidebar toggle listener if toggle is present\n $sidebarToggle?.addEventListener(\"change\", setScrollGutter);\n\n //
|
|
5
|
-
"mappings": "cAYC,gBAAkB,CAMjB,GAAI,OAAO,OAAW,KAAe,OAAO,SAAa,IAAa,CACpE,QAAQ,KACN,6JACF,EACA,MACF,CAGA,MAAM,IAAI,QAAeA,GAAY,CAC/B,SAAS,aAAe,WAC1B,OAAO,iBAAiB,OAAQ,IAAMA,EAAQ,CAAC,EAE/CA,EAAQ,CAEZ,CAAC,EAMD,MAAMC,EAAQ,SAAS,cAAc,MAAM,EACrCC,EAAO,SAAS,cAA2B,MAAM,EACjDC,EAAW,SAAS,cAA2B,WAAW,EAC1DC,EAAc,SAAS,cAA2B,cAAc,EAChEC,EAAiB,SAAS,cAC9B,qBACF,EACMC,EAAkB,SAAS,cAC/B,sBACF,EACMC,EAAiB,SAAS,cAC9B,4CACF,EAEMC,EAAuB,OAAO,WAAW,iBAAiB,EAE1DC,EAAsB,IAC1BR,GAAS,MACTG,GAAe,MACfA,EAAY,sBAAsB,EAAE,OAASH,EAAM,aAE/CS,EAAmB,IACvBR,GAAQ,MAAQ,OAAO,iBAAiBA,CAAI,EAAE,YAAc,SAMxDS,EAAkB,IAAM,CAC5B,MAAMC,EAAsBH,EAAoB,GAAKC,EAAiB,EAElEL,IACFA,EAAe,QAAQ,gBAAkB,OAAOO,CAAmB,GAEjER,IACFA,EAAY,QAAQ,gBAAkB,OAAOQ,CAAmB,EAEpE,EAEMC,EAAe,IAAM,CACrBX,IACFA,EAAK,QAAQ,aAAe,OAEhC,EAEMY,EAAmB,IAAM,CAE7B,GAAI,CAACb,GAAS,CAACK,GAAmB,CAACH,EACjC,OAIF,GAAIK,EAAqB,QAAS,CAChCF,EAAgB,MAAM,OAAS,GAC/B,MACF,CAGA,MAAMS,EAAQ,KAAK,IAAI,EAAGZ,EAAS,sBAAsB,EAAE,GAAG,EACxDa,EAAMf,EAAM,aACZgB,EAAkB,KAAK,MAAMD,EAAMD,CAAK,EAC9CT,EAAgB,MAAM,OAAS,GAAGW,CAAe,IACnD,EAOA,OAAO,iBAAiB,SAAUH,CAAgB,EAClD,OAAO,iBAAiB,SAAUH,CAAe,EAGjD,OAAO,iBAAiB,SAAU,IAAM,CAGlCF,EAAoB,GAAGK,EAAiB,CAC9C,CAAC,EAGDP,GAAgB,iBAAiB,SAAUI,CAAe,
|
|
6
|
-
"names": ["resolve", "$root", "$app", "$appBody", "$appContent", "$headerContent", "$sidebarContent", "$sidebarToggle", "smallWidthMediaQuery", "hasVerticalOverflow", "isOverflowHidden", "setScrollGutter", "shouldReserveGutter", "setJsEnabled", "setSidebarHeight", "start", "end", "availableHeight"]
|
|
4
|
+
"sourcesContent": ["// --------------------------------------------------------------------------------------\n// Enhancements\n// --------------------------------------------------------------------------------------\n// This script adds small UX tweaks for users with JavaScript enabled. In the spirit of\n// progressive enhancement, sites will be fully functional without it.\n//\n// This script does the following:\n// - Prevents layout shift when Modal, Drawer, and mobile Sidebar are opened\n// - Makes Sidebar fill available vertical space when Header is scrolled in/out of view\n// - Enables use of the `if-js-enabled` and `if-js-disabled` utility classes\n// --------------------------------------------------------------------------------------\n\n(async function () {\n /////////////////////////////\n // Initialize //\n /////////////////////////////\n\n // Ensure we're in a browser environment and exit early if not\n if (typeof window === \"undefined\" || typeof document === \"undefined\") {\n console.warn(\n \"The Progressive Enhancements script was loaded in a non-browser environment. It's designed to run exclusively in the browser, so it won't do anything here.\",\n );\n return;\n }\n\n // Wait for document to be done loading before we continue\n await new Promise<void>((resolve) => {\n if (document.readyState !== \"complete\") {\n window.addEventListener(\"load\", () => resolve());\n } else {\n resolve();\n }\n });\n\n /////////////////////////////\n // Globals & Utils //\n /////////////////////////////\n\n const $root = document.querySelector(\"html\");\n const $app = document.querySelector<HTMLElement>(\".app\");\n const $appBody = document.querySelector<HTMLElement>(\".app-body\");\n const $appContent = document.querySelector<HTMLElement>(\".app-content\");\n const $headerContent = document.querySelector<HTMLElement>(\n \".app-header-content\",\n );\n const $sidebarContent = document.querySelector<HTMLElement>(\n \".app-sidebar-content\",\n );\n const $sidebarToggle = document.querySelector<HTMLInputElement>(\n \".app-sidebar-toggle input[type='checkbox']\",\n );\n\n const smallWidthMediaQuery = window.matchMedia(\"(width < 55rem)\");\n\n const hasVerticalOverflow = () =>\n $root != null &&\n $appContent != null &&\n $appContent.getBoundingClientRect().bottom > $root.clientHeight;\n\n const isOverflowHidden = () =>\n $app != null && window.getComputedStyle($app).overflowY === \"hidden\";\n\n //////////////////////////////\n // Define Enhancements //\n //////////////////////////////\n\n const setScrollGutter = () => {\n const shouldReserveGutter = hasVerticalOverflow() && isOverflowHidden();\n\n if ($headerContent) {\n $headerContent.dataset.jrgScrollGutter = String(shouldReserveGutter);\n }\n if ($appContent) {\n $appContent.dataset.jrgScrollGutter = String(shouldReserveGutter);\n }\n };\n\n const setJsEnabled = () => {\n if ($app) {\n $app.dataset.jrgJsEnabled = \"true\";\n }\n };\n\n const setSidebarHeight = () => {\n // Ensure all necessary elements are present\n if (!$root || !$sidebarContent || !$appBody) {\n return;\n }\n\n // On narrow viewports (where sidebar is an overlay), remove the inline style for height\n if (smallWidthMediaQuery.matches) {\n $sidebarContent.style.height = \"\";\n return;\n }\n\n // On medium and wide viewports, resize the sidebar to fill available vertical space\n const start = Math.max(0, $appBody.getBoundingClientRect().top);\n const end = $root.clientHeight;\n const availableHeight = Math.floor(end - start);\n $sidebarContent.style.height = `${availableHeight}px`;\n };\n\n //////////////////////////////\n // Set Up Listeners & Run //\n //////////////////////////////\n\n // Resize listeners\n window.addEventListener(\"resize\", setSidebarHeight);\n window.addEventListener(\"resize\", setScrollGutter);\n\n // Scroll listener\n window.addEventListener(\"scroll\", () => {\n // Only resize the sidebar if the body content overflows the page. This\n // prevents weird behavior when the browser has elastic scrolling.\n if (hasVerticalOverflow()) setSidebarHeight();\n });\n\n // Attach sidebar toggle listener if toggle is present\n $sidebarToggle?.addEventListener(\"change\", setScrollGutter);\n\n // Add Modal/Drawer toggle listener\n document\n .querySelectorAll<HTMLDialogElement>(\"dialog.modal, dialog.drawer\")\n .forEach((dialog) => {\n dialog.addEventListener(\"toggle\", setScrollGutter);\n });\n\n // Automatically add listeners to any new Modals/Drawers\n const observer = new MutationObserver((mutations) => {\n for (const mutation of mutations) {\n for (const node of mutation.addedNodes) {\n if (\n node instanceof HTMLDialogElement &&\n (node.classList.contains(\"modal\") ||\n node.classList.contains(\"drawer\"))\n ) {\n node.addEventListener(\"toggle\", setScrollGutter);\n }\n }\n }\n });\n observer.observe(document.body, { childList: true, subtree: true });\n\n // Run all enhancements on initial load\n setSidebarHeight();\n setScrollGutter();\n setJsEnabled();\n})().catch(console.error);\n"],
|
|
5
|
+
"mappings": "cAYC,gBAAkB,CAMjB,GAAI,OAAO,OAAW,KAAe,OAAO,SAAa,IAAa,CACpE,QAAQ,KACN,6JACF,EACA,MACF,CAGA,MAAM,IAAI,QAAeA,GAAY,CAC/B,SAAS,aAAe,WAC1B,OAAO,iBAAiB,OAAQ,IAAMA,EAAQ,CAAC,EAE/CA,EAAQ,CAEZ,CAAC,EAMD,MAAMC,EAAQ,SAAS,cAAc,MAAM,EACrCC,EAAO,SAAS,cAA2B,MAAM,EACjDC,EAAW,SAAS,cAA2B,WAAW,EAC1DC,EAAc,SAAS,cAA2B,cAAc,EAChEC,EAAiB,SAAS,cAC9B,qBACF,EACMC,EAAkB,SAAS,cAC/B,sBACF,EACMC,EAAiB,SAAS,cAC9B,4CACF,EAEMC,EAAuB,OAAO,WAAW,iBAAiB,EAE1DC,EAAsB,IAC1BR,GAAS,MACTG,GAAe,MACfA,EAAY,sBAAsB,EAAE,OAASH,EAAM,aAE/CS,EAAmB,IACvBR,GAAQ,MAAQ,OAAO,iBAAiBA,CAAI,EAAE,YAAc,SAMxDS,EAAkB,IAAM,CAC5B,MAAMC,EAAsBH,EAAoB,GAAKC,EAAiB,EAElEL,IACFA,EAAe,QAAQ,gBAAkB,OAAOO,CAAmB,GAEjER,IACFA,EAAY,QAAQ,gBAAkB,OAAOQ,CAAmB,EAEpE,EAEMC,EAAe,IAAM,CACrBX,IACFA,EAAK,QAAQ,aAAe,OAEhC,EAEMY,EAAmB,IAAM,CAE7B,GAAI,CAACb,GAAS,CAACK,GAAmB,CAACH,EACjC,OAIF,GAAIK,EAAqB,QAAS,CAChCF,EAAgB,MAAM,OAAS,GAC/B,MACF,CAGA,MAAMS,EAAQ,KAAK,IAAI,EAAGZ,EAAS,sBAAsB,EAAE,GAAG,EACxDa,EAAMf,EAAM,aACZgB,EAAkB,KAAK,MAAMD,EAAMD,CAAK,EAC9CT,EAAgB,MAAM,OAAS,GAAGW,CAAe,IACnD,EAOA,OAAO,iBAAiB,SAAUH,CAAgB,EAClD,OAAO,iBAAiB,SAAUH,CAAe,EAGjD,OAAO,iBAAiB,SAAU,IAAM,CAGlCF,EAAoB,GAAGK,EAAiB,CAC9C,CAAC,EAGDP,GAAgB,iBAAiB,SAAUI,CAAe,EAG1D,SACG,iBAAoC,6BAA6B,EACjE,QAASO,GAAW,CACnBA,EAAO,iBAAiB,SAAUP,CAAe,CACnD,CAAC,EAGc,IAAI,iBAAkBQ,GAAc,CACnD,UAAWC,KAAYD,EACrB,UAAWE,KAAQD,EAAS,WAExBC,aAAgB,oBACfA,EAAK,UAAU,SAAS,OAAO,GAC9BA,EAAK,UAAU,SAAS,QAAQ,IAElCA,EAAK,iBAAiB,SAAUV,CAAe,CAIvD,CAAC,EACQ,QAAQ,SAAS,KAAM,CAAE,UAAW,GAAM,QAAS,EAAK,CAAC,EAGlEG,EAAiB,EACjBH,EAAgB,EAChBE,EAAa,CACf,GAAG,EAAE,MAAM,QAAQ,KAAK",
|
|
6
|
+
"names": ["resolve", "$root", "$app", "$appBody", "$appContent", "$headerContent", "$sidebarContent", "$sidebarToggle", "smallWidthMediaQuery", "hasVerticalOverflow", "isOverflowHidden", "setScrollGutter", "shouldReserveGutter", "setJsEnabled", "setSidebarHeight", "start", "end", "availableHeight", "dialog", "mutations", "mutation", "node"]
|
|
7
7
|
}
|