@brightspace-ui/core 3.322.0 → 3.323.0

package/custom-elements.json

@@ -18039,7 +18039,7 @@
         },
         {
           "name": "styles",
-          "default": "\"css`\\n\\t\\t:host,\\n\\t\\t:host > d2l-form {\\n\\t\\t\\tbottom: 0;\\n\\t\\t\\tleft: 0;\\n\\t\\t\\toverflow: hidden;\\n\\t\\t\\tposition: absolute;\\n\\t\\t\\tright: 0;\\n\\t\\t\\ttop: 0;\\n\\t\\t}\\n\\n\\t\\t:host([hidden]) {\\n\\t\\t\\tdisplay: none;\\n\\t\\t}\\n\\t\\t:host([width-type=\\\"normal\\\"]) .d2l-template-primary-secondary-content,\\n\\t\\t:host([width-type=\\\"normal\\\"]) .d2l-template-primary-secondary-footer {\\n\\t\\t\\tmargin: 0 auto;\\n\\t\\t\\tmax-width: 1230px;\\n\\t\\t\\twidth: 100%;\\n\\t\\t}\\n\\t\\t.d2l-template-primary-secondary-container {\\n\\t\\t\\tdisplay: flex;\\n\\t\\t\\tflex-direction: column;\\n\\t\\t\\theight: 100%;\\n\\t\\t\\twidth: 100%;\\n\\t\\t}\\n\\t\\t.d2l-template-primary-secondary-content {\\n\\t\\t\\tdisplay: flex;\\n\\t\\t\\theight: 100%;\\n\\t\\t\\toverflow: hidden;\\n\\t\\t}\\n\\n\\t\\tmain {\\n\\t\\t\\tflex: 2 0 0;\\n\\t\\t\\toverflow-x: hidden;\\n\\t\\t\\ttransition: none;\\n\\t\\t}\\n\\t\\tmain d2l-form-error-summary {\\n\\t\\t\\tmargin-inline: var(--d2l-template-primary-secondary-form-error-inline-margin, 20px);\\n\\t\\t}\\n\\n\\t\\t:host([resizable]) main {\\n\\t\\t\\tflex: 1 0 0;\\n\\t\\t}\\n\\t\\t:host([primary-overflow=\\\"hidden\\\"]) main {\\n\\t\\t\\toverflow: hidden;\\n\\t\\t}\\n\\t\\t.d2l-template-primary-secondary-secondary-container {\\n\\t\\t\\tflex: 1 0 0;\\n\\t\\t\\tmin-width: ${desktopMinSize}px;\\n\\t\\t\\toverflow: hidden;\\n\\t\\t}\\n\\t\\t:host([resizable]) .d2l-template-primary-secondary-secondary-container {\\n\\t\\t\\tflex: none;\\n\\t\\t\\tmin-width: 0;\\n\\t\\t}\\n\\t\\t[data-animate-resize] .d2l-template-primary-secondary-secondary-container {\\n\\t\\t\\ttransition: width 400ms cubic-bezier(0, 0.7, 0.5, 1), height 400ms cubic-bezier(0, 0.7, 0.5, 1);\\n\\t\\t}\\n\\t\\t.d2l-template-primary-secondary-divider-shadow {\\n\\t\\t\\tdisplay: none;\\n\\t\\t}\\n\\t\\taside {\\n\\t\\t\\theight: 100%;\\n\\t\\t\\tmin-width: ${desktopMinSize}px;\\n\\t\\t\\toverflow-x: hidden;\\n\\t\\t\\toverflow-y: scroll;\\n\\t\\t\\twidth: 100%;\\n\\t\\t}\\n\\n\\t\\t/* prevent margin colapse on slotted children */\\n\\t\\taside::before,\\n\\t\\taside::after {\\n\\t\\t\\tcontent: \\\" \\\";\\n\\t\\t\\tdisplay: table;\\n\\t\\t}\\n\\t\\t[data-background-shading=\\\"primary\\\"] > main,\\n\\t\\t[data-background-shading=\\\"secondary\\\"] > .d2l-template-primary-secondary-secondary-container {\\n\\t\\t\\tbackground-color: var(--d2l-color-gypsum);\\n\\t\\t}\\n\\t\\t:host([resizable]) [data-is-collapsed] aside {\\n\\t\\t\\tvisibility: hidden;\\n\\t\\t}\\n\\t\\t:host([resizable]:not([secondary-first])) aside {\\n\\t\\t\\tfloat: inline-start;\\n\\t\\t}\\n\\t\\t.d2l-template-primary-secondary-divider,\\n\\t\\t.d2l-template-primary-secondary-divider-not-resizable {\\n\\t\\t\\tbackground-color: var(--d2l-color-mica);\\n\\t\\t\\tflex: none;\\n\\t\\t\\toutline: none;\\n\\t\\t\\tposition: relative;\\n\\t\\t\\twidth: 1px;\\n\\t\\t\\tz-index: 1;\\n\\t\\t}\\n\\t\\t.d2l-template-primary-secondary-divider-handle {\\n\\t\\t\\tdisplay: none;\\n\\t\\t\\tposition: absolute;\\n\\t\\t\\ttop: calc(50%);\\n\\t\\t\\twidth: 100%;\\n\\t\\t}\\n\\t\\t:host([resizable]) .d2l-template-primary-secondary-divider {\\n\\t\\t\\tbackground-color: var(--d2l-color-gypsum);\\n\\t\\t\\tcursor: ew-resize;\\n\\t\\t\\twidth: 0.45rem;\\n\\t\\t}\\n\\t\\t:host([resizable]) [data-is-expanded] .d2l-template-primary-secondary-divider {\\n\\t\\t\\tcursor: var(--d2l-cursor-resize-inline-end, e-resize);\\n\\t\\t}\\n\\t\\t:host([resizable]) [data-is-collapsed] .d2l-template-primary-secondary-divider {\\n\\t\\t\\tcursor: var(--d2l-cursor-resize-inline-start, w-resize);\\n\\t\\t}\\n\\t\\t:host([resizable]) .d2l-template-primary-secondary-divider-handle {\\n\\t\\t\\talign-items: center;\\n\\t\\t\\tdisplay: flex;\\n\\t\\t\\tjustify-content: center;\\n\\t\\t}\\n\\t\\t:host([resizable]) [data-background-shading=\\\"secondary\\\"] .d2l-template-primary-secondary-divider {\\n\\t\\t\\tbox-shadow: calc(1px * var(--d2l-length-factor, 1)) 0 0 0 rgba(0, 0, 0, 0.15);\\n\\t\\t}\\n\\t\\t:host([resizable]) [data-background-shading=\\\"primary\\\"] .d2l-template-primary-secondary-divider {\\n\\t\\t\\tbox-shadow: calc(-1px * var(--d2l-length-factor, 1)) 0 0 0 rgba(0, 0, 0, 0.15);\\n\\t\\t}\\n\\t\\t.d2l-template-primary-secondary-divider-handle-desktop {\\n\\t\\t\\talign-items: center;\\n\\t\\t\\tdisplay: flex;\\n\\t\\t\\tjustify-content: center;\\n\\t\\t\\tposition: absolute;\\n\\t\\t}\\n\\t\\t.d2l-template-primary-secondary-divider-handle-left,\\n\\t\\t.d2l-template-primary-secondary-divider-handle-right {\\n\\t\\t\\tcolor: var(--d2l-color-celestine);\\n\\t\\t\\tdisplay: none;\\n\\t\\t\\tposition: absolute;\\n\\t\\t}\\n\\t\\t.d2l-template-primary-secondary-divider-handle-left {\\n\\t\\t\\tinset-inline-start: -1rem;\\n\\t\\t}\\n\\t\\t.d2l-template-primary-secondary-divider-handle-right {\\n\\t\\t\\tinset-inline-end: -1rem;\\n\\t\\t}\\n\\t\\t.d2l-template-primary-secondary-divider-handle-line {\\n\\t\\t\\tdisplay: flex;\\n\\t\\t\\theight: 0.9rem;\\n\\t\\t\\tjustify-content: space-between;\\n\\t\\t\\twidth: 0.25rem;\\n\\t\\t}\\n\\t\\t.d2l-template-primary-secondary-divider-handle-line::before,\\n\\t\\t.d2l-template-primary-secondary-divider-handle-line::after {\\n\\t\\t\\tbackground-color: var(--d2l-color-galena);\\n\\t\\t\\tborder-radius: 0.05rem;\\n\\t\\t\\tcontent: \\\"\\\";\\n\\t\\t\\tdisplay: inline-block;\\n\\t\\t\\twidth: 0.1rem;\\n\\t\\t}\\n\\t\\t.d2l-template-primary-secondary-divider:${unsafeCSS(getFocusPseudoClass())} .d2l-template-primary-secondary-divider-handle-right,\\n\\t\\t.d2l-template-primary-secondary-divider:${unsafeCSS(getFocusPseudoClass())} .d2l-template-primary-secondary-divider-handle-left {\\n\\t\\t\\tdisplay: block;\\n\\t\\t}\\n\\t\\t:host(:not([secondary-first])) [data-is-expanded] .d2l-template-primary-secondary-divider-handle-left,\\n\\t\\t:host([secondary-first]) [data-is-expanded] .d2l-template-primary-secondary-divider-handle-right {\\n\\t\\t\\tdisplay: none;\\n\\t\\t}\\n\\t\\td2l-icon {\\n\\t\\t\\tdisplay: none;\\n\\t\\t}\\n\\n\\t\\tfooter {\\n\\t\\t\\tbackground-color: white;\\n\\t\\t\\tbox-shadow: 0 -2px 4px rgba(32, 33, 34, 0.2); /* ferrite */\\n\\t\\t\\tpadding: 0.75rem 1rem;\\n\\t\\t\\tz-index: 1; /* ensures the footer box-shadow is over main areas with background colours set */\\n\\t\\t}\\n\\t\\theader {\\n\\t\\t\\tz-index: 14; /* ensures the header box-shadow is over main areas with background colours set, and opt-in on top of sticky header */\\n\\t\\t}\\n\\n\\t\\t:host([resizable]) .d2l-template-primary-secondary-divider:focus,\\n\\t\\t:host([resizable]) .d2l-template-primary-secondary-divider:hover {\\n\\t\\t\\tbackground-color: var(--d2l-color-mica);\\n\\t\\t\\tbox-shadow: none;\\n\\t\\t}\\n\\t\\t:host([resizable]) .d2l-template-primary-secondary-divider:${unsafeCSS(getFocusPseudoClass())} {\\n\\t\\t\\tbackground-color: var(--d2l-color-celestine);\\n\\t\\t}\\n\\t\\t.d2l-template-primary-secondary-divider:focus .d2l-template-primary-secondary-divider-handle-line::before,\\n\\t\\t.d2l-template-primary-secondary-divider:focus .d2l-template-primary-secondary-divider-handle-line::after,\\n\\t\\t.d2l-template-primary-secondary-divider:hover .d2l-template-primary-secondary-divider-handle-line::before,\\n\\t\\t.d2l-template-primary-secondary-divider:hover .d2l-template-primary-secondary-divider-handle-line::after {\\n\\t\\t\\tbackground-color: var(--d2l-color-ferrite);\\n\\t\\t}\\n\\t\\t.d2l-template-primary-secondary-divider:${unsafeCSS(getFocusPseudoClass())} .d2l-template-primary-secondary-divider-handle-line::before,\\n\\t\\t.d2l-template-primary-secondary-divider:${unsafeCSS(getFocusPseudoClass())} .d2l-template-primary-secondary-divider-handle-line::after {\\n\\t\\t\\tbackground-color: white;\\n\\t\\t}\\n\\n\\t\\t.d2l-template-primary-secondary-divider,\\n\\t\\t.d2l-template-primary-secondary-divider-handle-mobile,\\n\\t\\t.d2l-template-primary-secondary-divider-handle-line::before,\\n\\t\\t.d2l-template-primary-secondary-divider-handle-line::after {\\n\\t\\t\\ttransition: background-color 100ms, box-shadow 100ms;\\n\\t\\t}\\n\\t\\t.d2l-template-primary-secondary-divider:hover,\\n\\t\\t.d2l-template-primary-secondary-divider:hover .d2l-template-primary-secondary-divider-handle-mobile,\\n\\t\\t.d2l-template-primary-secondary-divider:hover .d2l-template-primary-secondary-divider-handle-line::before,\\n\\t\\t.d2l-template-primary-secondary-divider:hover .d2l-template-primary-secondary-divider-handle-line::after {\\n\\t\\t\\ttransition-delay: 100ms;\\n\\t\\t}\\n\\n\\t\\t.d2l-template-scroll::-webkit-scrollbar {\\n\\t\\t\\twidth: 8px;\\n\\t\\t}\\n\\n\\t\\t.d2l-template-scroll::-webkit-scrollbar-track {\\n\\t\\t\\tbackground: rgba(255, 255, 255, 0.4);\\n\\t\\t}\\n\\n\\t\\t.d2l-template-scroll::-webkit-scrollbar-thumb {\\n\\t\\t\\tbackground: var(--d2l-color-galena);\\n\\t\\t\\tborder-radius: 4px;\\n\\t\\t}\\n\\n\\t\\t.d2l-template-scroll::-webkit-scrollbar-thumb:hover {\\n\\t\\t\\tbackground: var(--d2l-color-tungsten);\\n\\t\\t}\\n\\n\\t\\t/* For Firefox */\\n\\t\\t.d2l-template-scroll {\\n\\t\\t\\tscrollbar-color: var(--d2l-color-galena) rgba(255, 255, 255, 0.4);\\n\\t\\t\\tscrollbar-width: thin;\\n\\t\\t}\\n\\n\\t\\t@media (prefers-reduced-motion: reduce) {\\n\\t\\t\\t.d2l-template-primary-secondary-divider,\\n\\t\\t\\t.d2l-template-primary-secondary-divider-handle-line::before,\\n\\t\\t\\t.d2l-template-primary-secondary-divider-handle-line::after,\\n\\t\\t\\t.d2l-template-primary-secondary-divider-handle-mobile {\\n\\t\\t\\t\\ttransition: none;\\n\\t\\t\\t}\\n\\t\\t}\\n\\t\\t@media only screen and (max-width: 767px) {\\n\\n\\t\\t\\t.d2l-template-primary-secondary-content {\\n\\t\\t\\t\\tflex-direction: column;\\n\\t\\t\\t}\\n\\n\\t\\t\\tmain {\\n\\t\\t\\t\\tflex: 1 0 0;\\n\\t\\t\\t}\\n\\t\\t\\t.d2l-template-primary-secondary-secondary-container {\\n\\t\\t\\t\\tflex: none;\\n\\t\\t\\t}\\n\\t\\t\\taside,\\n\\t\\t\\t.d2l-template-primary-secondary-secondary-container {\\n\\t\\t\\t\\tmin-width: auto;\\n\\t\\t\\t}\\n\\t\\t\\t[data-is-collapsed] aside {\\n\\t\\t\\t\\tdisplay: none;\\n\\t\\t\\t}\\n\\n\\t\\t\\t.d2l-template-primary-secondary-divider-handle-desktop {\\n\\t\\t\\t\\tdisplay: none;\\n\\t\\t\\t}\\n\\t\\t\\t/* Attribute selector is only used to increase specificity */\\n\\t\\t\\t:host([resizable]) .d2l-template-primary-secondary-divider,\\n\\t\\t\\t:host(:not([resizable])) .d2l-template-primary-secondary-divider {\\n\\t\\t\\t\\tbackground-color: var(--d2l-color-celestine);\\n\\t\\t\\t\\tcursor: ns-resize;\\n\\t\\t\\t\\theight: 0.1rem;\\n\\t\\t\\t\\twidth: 100%;\\n\\t\\t\\t}\\n\\t\\t\\t:host([resizable]) [data-is-collapsed] .d2l-template-primary-secondary-divider,\\n\\t\\t\\t:host(:not([resizable])) [data-is-collapsed] .d2l-template-primary-secondary-divider {\\n\\t\\t\\t\\tcursor: n-resize;\\n\\t\\t\\t}\\n\\t\\t\\t:host([resizable]) [data-is-expanded] .d2l-template-primary-secondary-divider,\\n\\t\\t\\t:host(:not([resizable])) [data-is-expanded] .d2l-template-primary-secondary-divider {\\n\\t\\t\\t\\tcursor: s-resize;\\n\\t\\t\\t}\\n\\n\\t\\t\\t/* Attribute selector is only used to increase specificity */\\n\\t\\t\\t:host([resizable]) .d2l-template-primary-secondary-divider:hover,\\n\\t\\t\\t:host(:not([resizable])) .d2l-template-primary-secondary-divider:hover,\\n\\t\\t\\t:host([resizable]) .d2l-template-primary-secondary-divider:focus,\\n\\t\\t\\t:host(:not([resizable])) .d2l-template-primary-secondary-divider:focus {\\n\\t\\t\\t\\tbackground-color: var(--d2l-color-celestine-minus-1);\\n\\t\\t\\t}\\n\\t\\t\\t.d2l-template-primary-secondary-divider-handle {\\n\\t\\t\\t\\tborder-radius: 0;\\n\\t\\t\\t\\tbottom: 0.1rem;\\n\\t\\t\\t\\tdisplay: block;\\n\\t\\t\\t\\tinset-inline-end: calc(17px + 0.2rem);\\n\\t\\t\\t\\toverflow: hidden;\\n\\t\\t\\t\\ttop: auto;\\n\\t\\t\\t}\\n\\t\\t\\t.d2l-template-primary-secondary-divider-handle-mobile {\\n\\t\\t\\t\\talign-items: center;\\n\\t\\t\\t\\tbackground-color: var(--d2l-color-celestine);\\n\\t\\t\\t\\tborder-radius: 0.25rem 0.25rem 0 0;\\n\\t\\t\\t\\tbottom: 0;\\n\\t\\t\\t\\tdisplay: flex;\\n\\t\\t\\t\\tjustify-content: center;\\n\\t\\t\\t\\tposition: absolute;\\n\\t\\t\\t\\tright: 0;\\n\\t\\t\\t}\\n\\t\\t\\t.d2l-template-primary-secondary-divider:hover .d2l-template-primary-secondary-divider-handle-mobile,\\n\\t\\t\\t.d2l-template-primary-secondary-divider:focus .d2l-template-primary-secondary-divider-handle-mobile {\\n\\t\\t\\t\\tbackground-color: var(--d2l-color-celestine-minus-1);\\n\\t\\t\\t}\\n\\t\\t\\t.d2l-template-primary-secondary-divider-handle,\\n\\t\\t\\t.d2l-template-primary-secondary-divider-handle-mobile {\\n\\t\\t\\t\\theight: 1rem;\\n\\t\\t\\t\\twidth: 2.2rem;\\n\\t\\t\\t}\\n\\t\\t\\t.d2l-template-primary-secondary-divider:${unsafeCSS(getFocusPseudoClass())} .d2l-template-primary-secondary-divider-handle {\\n\\t\\t\\t\\tbox-shadow: none;\\n\\t\\t\\t\\theight: 1.2rem;\\n\\t\\t\\t\\tinset-inline-end: 17px;\\n\\t\\t\\t\\twidth: 2.6rem;\\n\\t\\t\\t}\\n\\t\\t\\td2l-icon {\\n\\t\\t\\t\\tcolor: white;\\n\\t\\t\\t\\tdisplay: block;\\n\\t\\t\\t}\\n\\t\\t\\t${getFocusRingStyles(pseudoClass => `.d2l-template-primary-secondary-divider:${pseudoClass} .d2l-template-primary-secondary-divider-handle-mobile`, { extraStyles: css`right: 0.2rem; box-shadow: 0 0 0 2px #ffffff;` })}\\n\\t\\t\\t.d2l-template-primary-secondary-divider-shadow {\\n\\t\\t\\t\\tbox-shadow: 0 -2px 8px rgba(0, 0, 0, 0.25);\\n\\t\\t\\t\\tdisplay: block;\\n\\t\\t\\t\\theight: 100%;\\n\\t\\t\\t\\tposition: absolute;\\n\\t\\t\\t\\twidth: 100%;\\n\\t\\t\\t\\tz-index: -1;\\n\\t\\t\\t}\\n\\t\\t}\\n\\n\\t\\t@media print {\\n\\t\\t\\t:host {\\n\\t\\t\\t\\toverflow: visible;\\n\\t\\t\\t\\tposition: relative;\\n\\t\\t\\t}\\n\\n\\t\\t\\t.d2l-template-primary-secondary-content {\\n\\t\\t\\t\\tflex-direction: column;\\n\\t\\t\\t}\\n\\n\\t\\t\\t.d2l-template-primary-secondary-content,\\n\\t\\t\\t.d2l-template-primary-secondary-content > main,\\n\\t\\t\\t.d2l-template-primary-secondary-secondary-container {\\n\\t\\t\\t\\toverflow: visible;\\n\\t\\t\\t}\\n\\n\\t\\t\\t.d2l-template-primary-secondary-content > main {\\n\\t\\t\\t\\tbackground: none;\\n\\t\\t\\t}\\n\\n\\t\\t\\t.d2l-template-primary-secondary-divider-not-resizable,\\n\\t\\t\\t.d2l-template-primary-secondary-divider {\\n\\t\\t\\t\\tdisplay: none;\\n\\t\\t\\t}\\n\\n\\t\\t\\t.d2l-template-primary-secondary-container > footer {\\n\\t\\t\\t\\tbox-shadow: none;\\n\\t\\t\\t\\tpadding: 0;\\n\\t\\t\\t}\\n\\n\\t\\t\\t.d2l-template-primary-secondary-container,\\n\\t\\t\\t.d2l-template-primary-secondary-content {\\n\\t\\t\\t\\theight: auto;\\n\\t\\t\\t}\\n\\t\\t}\\n\\t`\""
+          "default": "\"css`\\n\\t\\t:host,\\n\\t\\t:host > d2l-form {\\n\\t\\t\\tbottom: 0;\\n\\t\\t\\tleft: 0;\\n\\t\\t\\toverflow: hidden;\\n\\t\\t\\tposition: absolute;\\n\\t\\t\\tright: 0;\\n\\t\\t\\ttop: 0;\\n\\t\\t}\\n\\n\\t\\t:host([hidden]) {\\n\\t\\t\\tdisplay: none;\\n\\t\\t}\\n\\t\\t:host([width-type=\\\"normal\\\"]) .d2l-template-primary-secondary-content,\\n\\t\\t:host([width-type=\\\"normal\\\"]) .d2l-template-primary-secondary-footer {\\n\\t\\t\\tmargin: 0 auto;\\n\\t\\t\\tmax-width: 1230px;\\n\\t\\t\\twidth: 100%;\\n\\t\\t}\\n\\t\\t.d2l-template-primary-secondary-container {\\n\\t\\t\\tdisplay: flex;\\n\\t\\t\\tflex-direction: column;\\n\\t\\t\\theight: 100%;\\n\\t\\t\\twidth: 100%;\\n\\t\\t}\\n\\t\\t.d2l-template-primary-secondary-content {\\n\\t\\t\\tdisplay: flex;\\n\\t\\t\\theight: 100%;\\n\\t\\t\\toverflow: hidden;\\n\\t\\t}\\n\\n\\t\\tmain {\\n\\t\\t\\tflex: 2 0 0;\\n\\t\\t\\toverflow-x: hidden;\\n\\t\\t\\ttransition: none;\\n\\t\\t}\\n\\t\\tmain d2l-form-error-summary {\\n\\t\\t\\tmargin-inline: var(--d2l-template-primary-secondary-form-error-inline-margin, 20px);\\n\\t\\t}\\n\\n\\t\\t:host([resizable]) main {\\n\\t\\t\\tflex: 1 0 0;\\n\\t\\t}\\n\\t\\t:host([primary-overflow=\\\"hidden\\\"]) main {\\n\\t\\t\\toverflow: hidden;\\n\\t\\t}\\n\\t\\t.d2l-template-primary-secondary-secondary-container {\\n\\t\\t\\tflex: 1 0 0;\\n\\t\\t\\tmin-width: ${desktopMinSize}px;\\n\\t\\t\\toverflow: hidden;\\n\\t\\t}\\n\\t\\t:host([resizable]) .d2l-template-primary-secondary-secondary-container {\\n\\t\\t\\tflex: none;\\n\\t\\t\\tmin-width: 0;\\n\\t\\t}\\n\\t\\t[data-animate-resize] .d2l-template-primary-secondary-secondary-container {\\n\\t\\t\\ttransition: width 400ms cubic-bezier(0, 0.7, 0.5, 1), height 400ms cubic-bezier(0, 0.7, 0.5, 1);\\n\\t\\t}\\n\\t\\t.d2l-template-primary-secondary-divider-shadow {\\n\\t\\t\\tdisplay: none;\\n\\t\\t}\\n\\t\\taside {\\n\\t\\t\\theight: 100%;\\n\\t\\t\\tmin-width: ${desktopMinSize}px;\\n\\t\\t\\toverflow-x: hidden;\\n\\t\\t\\toverflow-y: scroll;\\n\\t\\t\\twidth: 100%;\\n\\t\\t}\\n\\n\\t\\t/* prevent margin colapse on slotted children */\\n\\t\\taside::before,\\n\\t\\taside::after {\\n\\t\\t\\tcontent: \\\" \\\";\\n\\t\\t\\tdisplay: table;\\n\\t\\t}\\n\\t\\t[data-background-shading=\\\"primary\\\"] > main,\\n\\t\\t[data-background-shading=\\\"secondary\\\"] > .d2l-template-primary-secondary-secondary-container {\\n\\t\\t\\tbackground-color: var(--d2l-color-gypsum);\\n\\t\\t}\\n\\t\\t:host([resizable]) [data-is-collapsed] aside {\\n\\t\\t\\tvisibility: hidden;\\n\\t\\t}\\n\\t\\t:host([resizable]:not([secondary-first])) aside {\\n\\t\\t\\tfloat: inline-start;\\n\\t\\t}\\n\\t\\t.d2l-template-primary-secondary-divider,\\n\\t\\t.d2l-template-primary-secondary-divider-not-resizable {\\n\\t\\t\\tbackground-color: var(--d2l-color-mica);\\n\\t\\t\\tflex: none;\\n\\t\\t\\toutline: none;\\n\\t\\t\\tposition: relative;\\n\\t\\t\\twidth: 1px;\\n\\t\\t\\tz-index: 1;\\n\\t\\t}\\n\\t\\t.d2l-template-primary-secondary-divider-handle {\\n\\t\\t\\tdisplay: none;\\n\\t\\t\\tposition: absolute;\\n\\t\\t\\ttop: calc(50%);\\n\\t\\t\\twidth: 100%;\\n\\t\\t}\\n\\t\\t:host([resizable]) .d2l-template-primary-secondary-divider {\\n\\t\\t\\tbackground-color: var(--d2l-color-gypsum);\\n\\t\\t\\tcursor: ew-resize;\\n\\t\\t\\twidth: 0.45rem;\\n\\t\\t}\\n\\t\\t:host([resizable]) [data-is-expanded] .d2l-template-primary-secondary-divider {\\n\\t\\t\\tcursor: var(--d2l-cursor-resize-inline-end, e-resize);\\n\\t\\t}\\n\\t\\t:host([resizable]) [data-is-collapsed] .d2l-template-primary-secondary-divider {\\n\\t\\t\\tcursor: var(--d2l-cursor-resize-inline-start, w-resize);\\n\\t\\t}\\n\\t\\t:host([resizable]) .d2l-template-primary-secondary-divider-handle {\\n\\t\\t\\talign-items: center;\\n\\t\\t\\tdisplay: flex;\\n\\t\\t\\tjustify-content: center;\\n\\t\\t}\\n\\t\\t:host([resizable]) [data-background-shading=\\\"secondary\\\"] .d2l-template-primary-secondary-divider {\\n\\t\\t\\tbox-shadow: calc(1px * var(--d2l-length-factor, 1)) 0 0 0 rgba(0, 0, 0, 0.15);\\n\\t\\t}\\n\\t\\t:host([resizable]) [data-background-shading=\\\"primary\\\"] .d2l-template-primary-secondary-divider {\\n\\t\\t\\tbox-shadow: calc(-1px * var(--d2l-length-factor, 1)) 0 0 0 rgba(0, 0, 0, 0.15);\\n\\t\\t}\\n\\t\\t.d2l-template-primary-secondary-divider-handle-desktop {\\n\\t\\t\\talign-items: center;\\n\\t\\t\\tdisplay: flex;\\n\\t\\t\\tjustify-content: center;\\n\\t\\t\\tposition: absolute;\\n\\t\\t}\\n\\t\\t.d2l-template-primary-secondary-divider-handle-left,\\n\\t\\t.d2l-template-primary-secondary-divider-handle-right {\\n\\t\\t\\tcolor: var(--d2l-color-celestine);\\n\\t\\t\\tdisplay: none;\\n\\t\\t\\tposition: absolute;\\n\\t\\t}\\n\\t\\t.d2l-template-primary-secondary-divider-handle-left {\\n\\t\\t\\tinset-inline-start: -1rem;\\n\\t\\t}\\n\\t\\t.d2l-template-primary-secondary-divider-handle-right {\\n\\t\\t\\tinset-inline-end: -1rem;\\n\\t\\t}\\n\\t\\t.d2l-template-primary-secondary-divider-handle-line {\\n\\t\\t\\tdisplay: flex;\\n\\t\\t\\theight: 0.9rem;\\n\\t\\t\\tjustify-content: space-between;\\n\\t\\t\\twidth: 0.25rem;\\n\\t\\t}\\n\\t\\t.d2l-template-primary-secondary-divider-handle-line::before,\\n\\t\\t.d2l-template-primary-secondary-divider-handle-line::after {\\n\\t\\t\\tbackground-color: var(--d2l-color-galena);\\n\\t\\t\\tborder-radius: 0.05rem;\\n\\t\\t\\tcontent: \\\"\\\";\\n\\t\\t\\tdisplay: inline-block;\\n\\t\\t\\twidth: 0.1rem;\\n\\t\\t}\\n\\t\\t.d2l-template-primary-secondary-divider:${unsafeCSS(getFocusPseudoClass())} .d2l-template-primary-secondary-divider-handle-right,\\n\\t\\t.d2l-template-primary-secondary-divider:${unsafeCSS(getFocusPseudoClass())} .d2l-template-primary-secondary-divider-handle-left {\\n\\t\\t\\tdisplay: block;\\n\\t\\t}\\n\\t\\t:host(:not([secondary-first])) [data-is-expanded] .d2l-template-primary-secondary-divider-handle-left,\\n\\t\\t:host([secondary-first]) [data-is-expanded] .d2l-template-primary-secondary-divider-handle-right {\\n\\t\\t\\tdisplay: none;\\n\\t\\t}\\n\\t\\td2l-icon {\\n\\t\\t\\tdisplay: none;\\n\\t\\t}\\n\\n\\t\\tfooter {\\n\\t\\t\\tbackground-color: white;\\n\\t\\t\\tbox-shadow: 0 -2px 4px rgba(32, 33, 34, 0.2); /* ferrite */\\n\\t\\t\\tpadding: 0.75rem 1rem;\\n\\t\\t\\tz-index: 1; /* ensures the footer box-shadow is over main areas with background colours set */\\n\\t\\t}\\n\\t\\theader {\\n\\t\\t\\tz-index: 14; /* ensures the header box-shadow is over main areas with background colours set, and opt-in on top of sticky header */\\n\\t\\t}\\n\\n\\t\\t:host([resizable]) .d2l-template-primary-secondary-divider:focus,\\n\\t\\t:host([resizable]) .d2l-template-primary-secondary-divider:hover {\\n\\t\\t\\tbackground-color: var(--d2l-color-mica);\\n\\t\\t\\tbox-shadow: none;\\n\\t\\t}\\n\\t\\t:host([resizable]) .d2l-template-primary-secondary-divider:${unsafeCSS(getFocusPseudoClass())} {\\n\\t\\t\\tbackground-color: var(--d2l-color-celestine);\\n\\t\\t}\\n\\t\\t.d2l-template-primary-secondary-divider:focus .d2l-template-primary-secondary-divider-handle-line::before,\\n\\t\\t.d2l-template-primary-secondary-divider:focus .d2l-template-primary-secondary-divider-handle-line::after,\\n\\t\\t.d2l-template-primary-secondary-divider:hover .d2l-template-primary-secondary-divider-handle-line::before,\\n\\t\\t.d2l-template-primary-secondary-divider:hover .d2l-template-primary-secondary-divider-handle-line::after {\\n\\t\\t\\tbackground-color: var(--d2l-color-ferrite);\\n\\t\\t}\\n\\t\\t.d2l-template-primary-secondary-divider:${unsafeCSS(getFocusPseudoClass())} .d2l-template-primary-secondary-divider-handle-line::before,\\n\\t\\t.d2l-template-primary-secondary-divider:${unsafeCSS(getFocusPseudoClass())} .d2l-template-primary-secondary-divider-handle-line::after {\\n\\t\\t\\tbackground-color: white;\\n\\t\\t}\\n\\n\\t\\t.d2l-template-primary-secondary-divider,\\n\\t\\t.d2l-template-primary-secondary-divider-handle-mobile,\\n\\t\\t.d2l-template-primary-secondary-divider-handle-line::before,\\n\\t\\t.d2l-template-primary-secondary-divider-handle-line::after {\\n\\t\\t\\ttransition: background-color 100ms, box-shadow 100ms;\\n\\t\\t}\\n\\t\\t.d2l-template-primary-secondary-divider:hover,\\n\\t\\t.d2l-template-primary-secondary-divider:hover .d2l-template-primary-secondary-divider-handle-mobile,\\n\\t\\t.d2l-template-primary-secondary-divider:hover .d2l-template-primary-secondary-divider-handle-line::before,\\n\\t\\t.d2l-template-primary-secondary-divider:hover .d2l-template-primary-secondary-divider-handle-line::after {\\n\\t\\t\\ttransition-delay: 100ms;\\n\\t\\t}\\n\\n\\t\\t.d2l-template-scroll::-webkit-scrollbar {\\n\\t\\t\\twidth: 8px;\\n\\t\\t}\\n\\n\\t\\t.d2l-template-scroll::-webkit-scrollbar-track {\\n\\t\\t\\tbackground: rgba(255, 255, 255, 0.4);\\n\\t\\t}\\n\\n\\t\\t.d2l-template-scroll::-webkit-scrollbar-thumb {\\n\\t\\t\\tbackground: var(--d2l-color-galena);\\n\\t\\t\\tborder-radius: 4px;\\n\\t\\t}\\n\\n\\t\\t.d2l-template-scroll::-webkit-scrollbar-thumb:hover {\\n\\t\\t\\tbackground: var(--d2l-color-tungsten);\\n\\t\\t}\\n\\n\\t\\t/* For Firefox */\\n\\t\\t.d2l-template-scroll {\\n\\t\\t\\tscrollbar-color: var(--d2l-color-galena) rgba(255, 255, 255, 0.4);\\n\\t\\t\\tscrollbar-width: thin;\\n\\t\\t}\\n\\n\\t\\t@media (prefers-reduced-motion: reduce) {\\n\\t\\t\\t.d2l-template-primary-secondary-divider,\\n\\t\\t\\t.d2l-template-primary-secondary-divider-handle-line::before,\\n\\t\\t\\t.d2l-template-primary-secondary-divider-handle-line::after,\\n\\t\\t\\t.d2l-template-primary-secondary-divider-handle-mobile {\\n\\t\\t\\t\\ttransition: none;\\n\\t\\t\\t}\\n\\t\\t}\\n\\t\\t@media only screen and (max-width: 767px) {\\n\\n\\t\\t\\t.d2l-template-primary-secondary-content {\\n\\t\\t\\t\\tflex-direction: column;\\n\\t\\t\\t}\\n\\n\\t\\t\\tmain {\\n\\t\\t\\t\\tflex: 1 0 0;\\n\\t\\t\\t}\\n\\t\\t\\t.d2l-template-primary-secondary-secondary-container {\\n\\t\\t\\t\\tflex: none;\\n\\t\\t\\t}\\n\\t\\t\\taside,\\n\\t\\t\\t.d2l-template-primary-secondary-secondary-container {\\n\\t\\t\\t\\tmin-width: auto;\\n\\t\\t\\t}\\n\\t\\t\\t[data-is-collapsed] aside {\\n\\t\\t\\t\\tdisplay: none;\\n\\t\\t\\t}\\n\\n\\t\\t\\t.d2l-template-primary-secondary-divider-handle-desktop {\\n\\t\\t\\t\\tdisplay: none;\\n\\t\\t\\t}\\n\\n\\t\\t\\t:host([_static-footer]),\\n\\t\\t\\t:host([_static-footer]) > d2l-form {\\n\\t\\t\\t\\tbottom: unset;\\n\\t\\t\\t}\\n\\t\\t\\t:host([_static-footer]) .d2l-template-primary-secondary-container {\\n\\t\\t\\t\\tmin-height: 100vh;\\n\\t\\t\\t}\\n\\t\\t\\t:host([_static-footer]) .d2l-template-primary-secondary-content {\\n\\t\\t\\t\\tdisplay: grid;\\n\\t\\t\\t\\tflex-grow: 1;\\n\\t\\t\\t\\tgrid-template: 1fr auto auto / 1fr;\\n\\t\\t\\t}\\n\\t\\t\\t:host([_static-footer]) .d2l-template-primary-secondary-content > * {\\n\\t\\t\\t\\tgrid-column: 1/-1;\\n\\t\\t\\t}\\n\\t\\t\\t:host([_static-footer]) main {\\n\\t\\t\\t\\tgrid-row: 1 / -1;\\n\\t\\t\\t}\\n\\t\\t\\t:host([_static-footer]) .d2l-template-primary-secondary-divider {\\n\\t\\t\\t\\tgrid-row: 2 / 3;\\n\\t\\t\\t}\\n\\t\\t\\t:host([_static-footer]) .d2l-template-primary-secondary-secondary-container {\\n\\t\\t\\t\\tgrid-row: 3 / 4;\\n\\t\\t\\t}\\n\\t\\t\\t:host([_static-footer]) :not([data-background-shading=\\\"secondary\\\"]) > .d2l-template-primary-secondary-secondary-container {\\n\\t\\t\\t\\tbackground-color: white;\\n\\t\\t\\t}\\n\\n\\t\\t\\t/* Attribute selector is only used to increase specificity */\\n\\t\\t\\t:host([resizable]) .d2l-template-primary-secondary-divider,\\n\\t\\t\\t:host(:not([resizable])) .d2l-template-primary-secondary-divider {\\n\\t\\t\\t\\tbackground-color: var(--d2l-color-celestine);\\n\\t\\t\\t\\tcursor: ns-resize;\\n\\t\\t\\t\\theight: 0.1rem;\\n\\t\\t\\t\\twidth: 100%;\\n\\t\\t\\t}\\n\\t\\t\\t:host([resizable]) [data-is-collapsed] .d2l-template-primary-secondary-divider,\\n\\t\\t\\t:host(:not([resizable])) [data-is-collapsed] .d2l-template-primary-secondary-divider {\\n\\t\\t\\t\\tcursor: n-resize;\\n\\t\\t\\t}\\n\\t\\t\\t:host([resizable]) [data-is-expanded] .d2l-template-primary-secondary-divider,\\n\\t\\t\\t:host(:not([resizable])) [data-is-expanded] .d2l-template-primary-secondary-divider {\\n\\t\\t\\t\\tcursor: s-resize;\\n\\t\\t\\t}\\n\\n\\t\\t\\t/* Attribute selector is only used to increase specificity */\\n\\t\\t\\t:host([resizable]) .d2l-template-primary-secondary-divider:hover,\\n\\t\\t\\t:host(:not([resizable])) .d2l-template-primary-secondary-divider:hover,\\n\\t\\t\\t:host([resizable]) .d2l-template-primary-secondary-divider:focus,\\n\\t\\t\\t:host(:not([resizable])) .d2l-template-primary-secondary-divider:focus {\\n\\t\\t\\t\\tbackground-color: var(--d2l-color-celestine-minus-1);\\n\\t\\t\\t}\\n\\t\\t\\t.d2l-template-primary-secondary-divider-handle {\\n\\t\\t\\t\\tborder-radius: 0;\\n\\t\\t\\t\\tbottom: 0.1rem;\\n\\t\\t\\t\\tdisplay: block;\\n\\t\\t\\t\\tinset-inline-end: calc(17px + 0.2rem);\\n\\t\\t\\t\\toverflow: hidden;\\n\\t\\t\\t\\ttop: auto;\\n\\t\\t\\t}\\n\\t\\t\\t.d2l-template-primary-secondary-divider-handle-mobile {\\n\\t\\t\\t\\talign-items: center;\\n\\t\\t\\t\\tbackground-color: var(--d2l-color-celestine);\\n\\t\\t\\t\\tborder-radius: 0.25rem 0.25rem 0 0;\\n\\t\\t\\t\\tbottom: 0;\\n\\t\\t\\t\\tdisplay: flex;\\n\\t\\t\\t\\tjustify-content: center;\\n\\t\\t\\t\\tposition: absolute;\\n\\t\\t\\t\\tright: 0;\\n\\t\\t\\t}\\n\\t\\t\\t.d2l-template-primary-secondary-divider:hover .d2l-template-primary-secondary-divider-handle-mobile,\\n\\t\\t\\t.d2l-template-primary-secondary-divider:focus .d2l-template-primary-secondary-divider-handle-mobile {\\n\\t\\t\\t\\tbackground-color: var(--d2l-color-celestine-minus-1);\\n\\t\\t\\t}\\n\\t\\t\\t.d2l-template-primary-secondary-divider-handle,\\n\\t\\t\\t.d2l-template-primary-secondary-divider-handle-mobile {\\n\\t\\t\\t\\theight: 1rem;\\n\\t\\t\\t\\twidth: 2.2rem;\\n\\t\\t\\t}\\n\\t\\t\\t.d2l-template-primary-secondary-divider:${unsafeCSS(getFocusPseudoClass())} .d2l-template-primary-secondary-divider-handle {\\n\\t\\t\\t\\tbox-shadow: none;\\n\\t\\t\\t\\theight: 1.2rem;\\n\\t\\t\\t\\tinset-inline-end: 17px;\\n\\t\\t\\t\\twidth: 2.6rem;\\n\\t\\t\\t}\\n\\t\\t\\td2l-icon {\\n\\t\\t\\t\\tcolor: white;\\n\\t\\t\\t\\tdisplay: block;\\n\\t\\t\\t}\\n\\t\\t\\t${getFocusRingStyles(pseudoClass => `.d2l-template-primary-secondary-divider:${pseudoClass} .d2l-template-primary-secondary-divider-handle-mobile`, { extraStyles: css`right: 0.2rem; box-shadow: 0 0 0 2px #ffffff;` })}\\n\\t\\t\\t.d2l-template-primary-secondary-divider-shadow {\\n\\t\\t\\t\\tbox-shadow: 0 -2px 8px rgba(0, 0, 0, 0.25);\\n\\t\\t\\t\\tdisplay: block;\\n\\t\\t\\t\\theight: 100%;\\n\\t\\t\\t\\tposition: absolute;\\n\\t\\t\\t\\twidth: 100%;\\n\\t\\t\\t\\tz-index: -1;\\n\\t\\t\\t}\\n\\t\\t}\\n\\n\\t\\t@media print {\\n\\t\\t\\t:host {\\n\\t\\t\\t\\toverflow: visible;\\n\\t\\t\\t\\tposition: relative;\\n\\t\\t\\t}\\n\\n\\t\\t\\t.d2l-template-primary-secondary-content {\\n\\t\\t\\t\\tflex-direction: column;\\n\\t\\t\\t}\\n\\n\\t\\t\\t.d2l-template-primary-secondary-content,\\n\\t\\t\\t.d2l-template-primary-secondary-content > main,\\n\\t\\t\\t.d2l-template-primary-secondary-secondary-container {\\n\\t\\t\\t\\toverflow: visible;\\n\\t\\t\\t}\\n\\n\\t\\t\\t.d2l-template-primary-secondary-content > main {\\n\\t\\t\\t\\tbackground: none;\\n\\t\\t\\t}\\n\\n\\t\\t\\t.d2l-template-primary-secondary-divider-not-resizable,\\n\\t\\t\\t.d2l-template-primary-secondary-divider {\\n\\t\\t\\t\\tdisplay: none;\\n\\t\\t\\t}\\n\\n\\t\\t\\t.d2l-template-primary-secondary-container > footer {\\n\\t\\t\\t\\tbox-shadow: none;\\n\\t\\t\\t\\tpadding: 0;\\n\\t\\t\\t}\\n\\n\\t\\t\\t.d2l-template-primary-secondary-container,\\n\\t\\t\\t.d2l-template-primary-secondary-content {\\n\\t\\t\\t\\theight: auto;\\n\\t\\t\\t}\\n\\t\\t}\\n\\t`\""
         },
         {
           "name": "form"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brightspace-ui/core",
-  "version": "3.322.0",
+  "version": "3.323.0",
   "description": "A collection of accessible, free, open-source web components for building Brightspace applications",
   "type": "module",
   "repository": "https://github.com/BrightspaceUI/core.git",

package/templates/primary-secondary/primary-secondary.js

@@ -12,6 +12,7 @@ import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
 import { styleMap } from 'lit/directives/style-map.js';
 
 const reduceMotion = matchMedia('(prefers-reduced-motion: reduce)').matches;
+const desktopMinHeight = 3 * 44; // Primary/Secondary panels have a min-height of 1/3 of the viewport on mobile view. This threshhold prevents them from being smaller than the recommended WCAG Target size(AAA)
 
 const desktopMinSize = 320;
 
@@ -375,7 +376,7 @@ class MobileMouseResizer extends Resizer {
 			this._wasCollapsed = this.isCollapsed;
 			this.dispatchResizeStart();
 			e.preventDefault();
-			const y = e.clientY - this.contentRect.top;
+			const y = this.#getY(e);
 			this._offset = y - (this.contentRect.height - this.panelSize);
 			this._isDragging = false;
 			this._isResizing = true;
@@ -387,7 +388,7 @@ class MobileMouseResizer extends Resizer {
 		if (!this._isResizing) {
 			return;
 		}
-		const y = e.clientY - this.contentRect.top;
+		const y = this.#getY(e);
 		const secondaryHeight = this.clampMaxHeight(this.contentRect.height - y + this._offset);
 		this._isDragging = true;
 		this.dispatchResize(secondaryHeight, false);
@@ -399,7 +400,7 @@ class MobileMouseResizer extends Resizer {
 		}
 		const expandedCollapseThreshold = this.contentBounds.minHeight * 0.75;
 		const collapsedCollapseThreshold = this.contentBounds.minHeight * 0.1;
-		const y = e.clientY - this.contentRect.top;
+		const y = this.#getY(e);
 		const desiredSecondaryHeight = this.contentRect.height - y + this._offset;
 		if (
 			this._isDragging
@@ -414,6 +415,9 @@ class MobileMouseResizer extends Resizer {
 		this._isResizing = false;
 		this.dispatchResizeEnd();
 	}
+	#getY(e) {
+		return e.clientY + document.documentElement.scrollTop - this.contentRect.top;
+	}
 
 }
 
@@ -595,6 +599,7 @@ class TemplatePrimarySecondary extends LocalizeCoreElement(LitElement) {
 		 * @type {boolean}
 		 */
 		hasForm: { type: Boolean, attribute: 'has-form' },
+		_staticFooter: { type: Boolean, attribute: '_static-footer', reflect: true },
 		_formErrorSummary: { type: Array },
 		_hasFooter: { state: true },
 		_isCollapsed: { state: true },
@@ -867,6 +872,35 @@ class TemplatePrimarySecondary extends LocalizeCoreElement(LitElement) {
 			.d2l-template-primary-secondary-divider-handle-desktop {
 				display: none;
 			}
+
+			:host([_static-footer]),
+			:host([_static-footer]) > d2l-form {
+				bottom: unset;
+			}
+			:host([_static-footer]) .d2l-template-primary-secondary-container {
+				min-height: 100vh;
+			}
+			:host([_static-footer]) .d2l-template-primary-secondary-content {
+				display: grid;
+				flex-grow: 1;
+				grid-template: 1fr auto auto / 1fr;
+			}
+			:host([_static-footer]) .d2l-template-primary-secondary-content > * {
+				grid-column: 1/-1;
+			}
+			:host([_static-footer]) main {
+				grid-row: 1 / -1;
+			}
+			:host([_static-footer]) .d2l-template-primary-secondary-divider {
+				grid-row: 2 / 3;
+			}
+			:host([_static-footer]) .d2l-template-primary-secondary-secondary-container {
+				grid-row: 3 / 4;
+			}
+			:host([_static-footer]) :not([data-background-shading="secondary"]) > .d2l-template-primary-secondary-secondary-container {
+				background-color: white;
+			}
+
 			/* Attribute selector is only used to increase specificity */
 			:host([resizable]) .d2l-template-primary-secondary-divider,
 			:host(:not([resizable])) .d2l-template-primary-secondary-divider {
@@ -1009,6 +1043,7 @@ class TemplatePrimarySecondary extends LocalizeCoreElement(LitElement) {
 		this.widthType = 'fullscreen';
 
 		this._animateResize = false;
+		this._staticFooter = false;
 		this._isCollapsed = false;
 		this._isExpanded = false;
 		this._isMobile = isMobile();
@@ -1151,11 +1186,13 @@ class TemplatePrimarySecondary extends LocalizeCoreElement(LitElement) {
 			this.shadowRoot.querySelector('.d2l-template-primary-secondary-divider-not-resizable');
 		const desktopDividerSize = divider.offsetWidth;
 		const mobileDividerSize = divider.offsetHeight;
+		const footerSize = this.shadowRoot.querySelector('footer')?.offsetHeight ?? 0;
+		const maxAvailableHeight = !this._staticFooter ? contentRect.height : Math.min(contentRect.height, window.innerHeight - footerSize);
 		return {
 			height: contentRect.height,
 			minWidth: desktopMinSize,
 			maxWidth: contentRect.width - desktopMinSize - desktopDividerSize,
-			minHeight: (contentRect.height - mobileDividerSize) * (1 / 3),
+			minHeight: (maxAvailableHeight - mobileDividerSize) * (1 / 3),
 			maxHeight: (contentRect.height - mobileDividerSize) * (2 / 3),
 			width: contentRect.width
 		};
@@ -1173,6 +1210,9 @@ class TemplatePrimarySecondary extends LocalizeCoreElement(LitElement) {
 	_onContentResize(entries) {
 		const entry = entries[0];
 		const contentRect = entry.target.getBoundingClientRect();
+		const footerSize = this.shadowRoot.querySelector('footer')?.offsetHeight ?? 0;
+		const headerSize = this.shadowRoot.querySelector('header')?.offsetHeight ?? 0;
+		this._staticFooter = window.innerHeight - footerSize - headerSize < desktopMinHeight;
 		this._contentBounds = this._computeContentBounds(contentRect);
 		this._isMobile = isMobile();