@shortfuse/materialdesignweb 0.7.6 → 0.8.0

package/utils/popup.js

@@ -63,6 +63,7 @@ export function canAnchorPopup(options) {
       }
     }
   }
+
   let { width, height } = options;
   if (width == null || height == null) {
     const { popup } = options;
@@ -75,42 +76,62 @@ export function canAnchorPopup(options) {
     }
   }
 
-  // eslint-disable-next-line default-case
-  switch (directionX) {
-    case 'left':
-      pageX -= width;
-      break;
-    case 'center':
-      pageX -= width / 2;
-  }
+  let top;
+  let right;
+  let bottom;
+  let left;
+  const margin = options.margin ?? 0;
+  const pageTop = margin;
+  const pageBottom = document.documentElement.clientHeight - margin;
+  const pageRight = document.documentElement.clientWidth - margin;
+  const pageLeft = margin;
+
+  const offsetX = options.offsetX ?? 0;
+  const offsetY = options.offsetY ?? 0;
+  pageX += offsetX;
+  pageY += offsetY;
 
-  // eslint-disable-next-line default-case
   switch (directionY) {
     case 'up':
-      pageY -= height;
+      bottom = Math.min(pageY, pageBottom);
+      top = Math.max(bottom - height, pageTop);
       break;
     case 'center':
-      pageY -= height / 2;
+      top = Math.max(pageY - height / 2, pageTop);
+      bottom = Math.min(pageY + height / 2, pageBottom);
+      break;
+    default:
+      top = Math.max(pageY, pageTop);
+      bottom = Math.min(top + height, pageBottom);
   }
 
-  const offsetX = options.offsetX ?? 0;
-  const offsetY = options.offsetY ?? 0;
-  pageX += offsetX;
-  pageY += offsetY;
-  const margin = options.margin ?? 0;
-  if (!options.force) {
-    if (pageX - margin < 0) return null;
-    if (pageY - margin < 0) return null;
-    if (pageX + width > (document.documentElement.clientWidth - margin)) return null;
-    if (pageY + height > (document.documentElement.clientHeight - margin)) return null;
+  switch (directionX) {
+    case 'left':
+      right = Math.min(pageX, pageRight);
+      left = Math.max(right - width, pageLeft);
+      break;
+    case 'center':
+      left = Math.max(pageX - width / 2, pageLeft);
+      right = Math.min(pageX + width / 2, pageRight);
+      break;
+    default:
+      left = Math.max(pageX, pageLeft);
+      right = Math.min(left + width, pageRight);
   }
 
+  // compute area
+  const fullSize = width * height;
+  const realSize = (bottom - top) * (right - left);
+
+  const visibility = realSize / fullSize;
+
   return {
     ...options,
-    offsetX,
-    offsetY,
-    pageX,
-    pageY,
+    top,
+    right,
+    bottom,
+    left,
+    visibility,
     transformOriginX: directionX === 'center' ? 'center' : (directionX === 'left' ? 'right' : 'left'),
     transformOriginY: directionY === 'center' ? 'center' : (directionY === 'up' ? 'bottom' : 'top'),
   };

package/components/ListSelect.js

@@ -1,220 +0,0 @@
-import { constructHTMLOptionsCollectionProxy } from '../dom/HTMLOptionsCollectionProxy.js';
-import FormAssociatedMixin from '../mixins/FormAssociatedMixin.js';
-import KeyboardNavMixin from '../mixins/KeyboardNavMixin.js';
-import StateMixin from '../mixins/StateMixin.js';
-
-import List from './List.js';
-import ListOption from './ListOption.js';
-
-/** @implements {HTMLSelectElement} */
-export default class ListSelect extends List
-  .mixin(StateMixin)
-  .mixin(FormAssociatedMixin)
-  .mixin(KeyboardNavMixin) {
-  static {
-    this.autoRegister('mdw-list-select');
-    // eslint-disable-next-line no-unused-expressions
-    this.css`
-      :host(:disabled) {
-        cursor: not-allowed;
-        pointer-events: none;
-      }
-      
-      :host([internals-disabled]) {
-        cursor: not-allowed;
-        pointer-events: none;
-      }
-    `;
-    this.on({
-      disabledStateChanged(oldValue, newValue) {
-        this._kbdFocusable = !newValue;
-        this.tabIndex = newValue ? -1 : 0;
-      },
-      multipleChanged(oldValue, newValue) {
-        this.updateAriaProperty('ariaMultiSelectable', newValue ? 'true' : 'false');
-      },
-    });
-  }
-
-  /** @type {HTMLCollectionOf<ListOption> & HTMLOptionsCollection} */
-  _optionsCollection = null;
-
-  constructor() {
-    super();
-    this.refs.slot.addEventListener('slotchange', this.onSlotChange);
-    this.addEventListener('keydown', this.onControlKeydown);
-    this.addEventListener('click', this.onListSelectClick);
-  }
-
-  connectedCallback() {
-    super.connectedCallback();
-    if (!this.hasAttribute('tabindex')) {
-      this.tabIndex = 0;
-    }
-  }
-
-  * _selectedOptionsGenerator() {
-    for (const el of this.options) {
-      if (!el.selected) continue;
-      yield el;
-    }
-  }
-
-  /**
-   * @param {Event} event
-   * @this {HTMLSlotElement}
-   * @return {void}
-   */
-  onSlotChange(event) {
-    /** @type {{host:ListSelect}} */ // @ts-ignore Coerce
-    const { host } = this.getRootNode();
-    host.refreshTabIndexes();
-    let index = 0;
-    for (const el of host.options) {
-      el._index = index++;
-    }
-  }
-
-  /**
-   * @param {KeyboardEvent} event
-   * @this {ListSelect}
-   * @return {void}
-   */
-  onControlKeydown(event) {
-    if (event.key === 'Spacebar' || event.key === ' ') {
-      const target = event.target;
-      if (!(target instanceof ListOption)) return;
-      event.stopPropagation();
-      event.preventDefault();
-      this.onListSelectClick.call(this, event);
-    }
-  }
-
-  /**
-   * @param {MouseEvent|KeyboardEvent} event
-   * @this {ListSelect}
-   * @return {void}
-   */
-  onListSelectClick(event) {
-    console.log('onListSelectClick');
-    const target = event.target;
-    if (!(target instanceof ListOption)) return;
-    event.stopPropagation();
-    if (target.disabledState) return;
-
-    // Perform unselect
-    if (target.selected) {
-      if (this.multiple) {
-        const selections = [...this.selectedOptions];
-        if (this.required && selections.length === 1) return;
-        if (selections.length === 0) {
-          console.warn('impossible??');
-        }
-        target.selected = false;
-        let firstSelection = selections.shift();
-        if (firstSelection === target) {
-          // Get new first selection (or undefined)
-          firstSelection = selections.shift();
-        }
-        this._value = firstSelection?.value ?? '';
-        return;
-      }
-      if (this.required) return;
-      target.selected = false;
-      this._value = '';
-      return;
-    }
-
-    if (this.multiple) {
-      // Skip ctrlKey requirement
-      target.selected = true;
-      this._value = this.selectedOptions.next().value;
-      return;
-    }
-
-    for (const el of this.options) {
-      el.selected = el === target;
-    }
-    this._value = target.value;
-  }
-
-  formResetCallback() {
-    // TODO: Reset dirty on options
-    super.formResetCallback();
-  }
-
-  get options() {
-    if (!this._optionsCollection) {
-      this._optionsCollection = constructHTMLOptionsCollectionProxy({
-        host: this,
-        collection: this.getElementsByTagName(ListOption.elementName),
-        OptionConstructor: ListOption,
-        GroupConstructor: ListOption,
-      });
-    }
-    return this._optionsCollection;
-  }
-
-  get selectedOptions() {
-    return this._selectedOptionsGenerator();
-  }
-
-  // @ts-ignore @override
-  get type() { return 'select'; }
-
-  /** @override */
-  get kbdNavQuery() { return ListOption.elementName; }
-
-  // @ts-ignore @override
-  get length() {
-    return this.options.length;
-  }
-
-  get selectedIndex() {
-    return this.options.selectedIndex;
-  }
-
-  set selectedIndex(value) {
-    this.options.selectedIndex = value;
-    this._value = (this.options.item(value)?.value) ?? '';
-  }
-
-  get value() {
-    return this._value;
-  }
-
-  /** @param {string} v */
-  set value(v) {
-    for (const el of this.options) {
-      el.selected = (el.value === v);
-    }
-    this._value = v;
-  }
-
-  get add() { return this.options.add; }
-
-  get item() { return this.options.item; }
-
-  get namedItem() { return this.options.namedItem; }
-
-  * [Symbol.iterator]() {
-    for (const el of this.options) {
-      yield el;
-    }
-  }
-
-  get kbdNavFocusableWhenDisabled() { return true; }
-}
-
-// https://html.spec.whatwg.org/multipage/form-elements.html#htmlselectelement
-
-// [CEReactions] attribute DOMString autocomplete;
-// ListSelect.prototype.disabled = ListSelect.prop('disabled', { type: 'boolean' });
-// readonly attribute HTMLFormElement? form;
-ListSelect.prototype.multiple = ListSelect.prop('multiple', { type: 'boolean' });
-// [CEReactions] attribute boolean multiple;
-// [CEReactions] attribute DOMString name;
-// [CEReactions] attribute boolean required;
-ListSelect.prototype.size = ListSelect.prop('size', { type: 'integer', empty: 0 });
-ListSelect.prototype._ariaRole = 'listbox';
-ListSelect.prototype.delegatesFocus = true;

package/components/Option.js

@@ -1,91 +0,0 @@
-// https://www.w3.org/WAI/ARIA/apg/patterns/listbox/
-
-import MenuItem from './MenuItem.js';
-
-// https://html.spec.whatwg.org/multipage/form-elements.html#htmloptionelement
-
-/** @implements {HTMLOptionElement} */
-export default class Option extends MenuItem
-  .extend()
-  .set({
-    disabled: undefined, // Remove observer
-    _index: -1,
-  })
-  .observe({
-    // ListOption.prototype._form = ListOption.prop('_form');
-    _label: { attr: 'label', nullParser: String },
-    defaultSelected: { attr: 'selected', type: 'boolean' },
-    _selected: 'boolean',
-    _value: { attr: 'value', reflect: true },
-  })
-  .define({
-    index() { return this._index; },
-    form() { return /** @type {import('./ListSelect.js').default} */ (this.parentElement)?.form; },
-
-    label: {
-      get() { return this._label; },
-      /** @param {string} value */
-      set(value) {
-        this._label = value;
-      },
-    },
-    value: {
-      get() { return this._value || this.text; },
-      /** @param {string} value */
-      set(value) { this._label = value; },
-    },
-    selected: {
-      get() { return this._selected; },
-      /** @param {boolean} value */
-      set(value) { this._selected = value; },
-    },
-    disabled: {
-      get() {
-        return this.getAttribute('aria-disabled') === 'true' || this._disabled;
-      },
-      /** @param {boolean} value */
-      set(value) {
-        this._disabled = value;
-      },
-    },
-
-  })
-  .on('composed', ({ $ }) => {
-    // $('#state').setAttribute('state-disabled', 'focus hover');
-  })
-  .onPropChanged({
-    checkbox(oldValue, newValue) {
-      if (newValue) {
-        this.setAttribute('aria-selected', String(this.hasAttribute('selected')));
-      } else {
-        this.removeAttribute('aria-selected');
-      }
-    },
-    _selected(oldValue, newValue) {
-      this.setAttribute('aria-selected', String(newValue));
-    },
-  }) {
-  static { this.autoRegister('mdw-option'); }
-
-  /**
-   * @param {string} [text]
-   * @param {string} [value]
-   * @param {boolean} [defaultSelected]
-   * @param {boolean} [selected]
-   */
-  constructor(text, value, defaultSelected, selected) {
-    super();
-    if (text !== undefined) {
-      this.text = text;
-    }
-    if (value !== undefined) {
-      this._value = value;
-    }
-    if (defaultSelected !== undefined) {
-      this.defaultSelected = defaultSelected;
-    }
-    if (selected !== undefined) {
-      this._selected = selected;
-    }
-  }
-}

package/components/Pane.js

@@ -1,281 +0,0 @@
-import CustomElement from '../core/CustomElement.js';
-import ThemableMixin from '../mixins/ThemableMixin.js';
-
-export default CustomElement
-  .mixin(ThemableMixin)
-  .extend()
-  .observe({
-    columns: 'integer',
-    flexible: 'boolean',
-    fixed: 'boolean',
-    split: 'boolean',
-    navDrawer: 'boolean',
-    navRail: 'boolean',
-  })
-  .html/* html */`
-    <slot id=slot></slot>
-  `
-  .css`
-    /* https://m2.material.io/design/layout/responsive-layout-grid.html#columns-gutters-and-margins */
-    /*
-    * Window breakpoints
-    * Compact (0 <= width < 600px):
-    *   * Single: 100vw - padding
-    *   * Padding: 16px
-    *   * Spacer: 0 (none)
-    * Medium (600px <= width < 840px)
-    *   * Single: 100vw - padding - (?navrail)
-    *   * [Fixed]: 360px
-    *   * [Flexable]: 100vw - 360px - spacer - padding
-    *   * [Split] 50vw - ((padding + spacer) / 2)
-    *   * Padding: 24px
-    *   * Spacer: 24px
-    * Expanded (840px <= width)
-    *   * Single: 100vw - padding - (?navrail | ?navdrawer)
-    *   * [Fixed] 360px
-    *   * [Flexable] 100vw - 360px - spacer - padding - (?navrail | ?navdrawer)
-    *   * [Split] 50vw - ((padding + spacer + (?navrail | ?navdrawer)) / 2)
-    *   * Padding: 24px
-    *   * Spacer: 24px
-    *
-    * | Screen size         | Margin  | Body    | Layout columns |
-    * |---------------------|---------|---------|----------------|
-    * | Extra-small (phone) |         |         |                |
-    * | 0-631dp             | 16dp    | Scaling | 4              |
-    * | 632 - 647           | Scaling | 600dp   | 8              |
-    * | Small (tablet)      |         |         |                |
-    * | 648-887             | 24dp    | Scaling | 8              |
-    * | 888-1239            | Scaling | 840dp   | 12             |
-    * | Medium (laptop)     |         |         |                |
-    * | 1240-1439           | 200dp   | Scaling | 12             |
-    * | Large (desktop)     |         |         |                |
-    * | 1440+               | Scaling | 1040    | 12             |
-    *
-    *
-    * Column count is pane-based, not window based requiring newly computed values.
-    * Gutters are irrelevant to pane sizing.
-    * Nav Rail is ~80px.
-    * Nav Drawer is ~360px.
-    * Padding and spacers are set by pane's parent.
-    * Avoid using CSS Variables because panes are at top of document tree. https://bugs.chromium.org/p/chromium/issues/detail?id=1056209
-    * Container queries would reduce code considerably.
-    */
-
-    /* Compact */
-    :host {
-      display: grid;
-      align-content: flex-start;
-      gap: 16px;
-      grid-auto-flow: row;
-      grid-template-columns: repeat(4, 1fr);
-
-      max-inline-size: 600px;
-
-      flex: 1;
-
-      transition-duration: 200ms;
-      /* stylelint-disable-next-line liberty/use-logical-spec */
-      transition-property: visibility, width, max-inline-size;
-    }
-
-    /* Will set 8col when window is 600px + padding (2x16) */
-    /* Will set 12col when window is 840px + padding (2x24) */
-    @media screen and (min-width: 632px) { :host { grid-template-columns: repeat(8, 1fr); } }
-    @media screen and (min-width: 888px) { :host { grid-template-columns: repeat(12, 1fr); } }
-
-    /* Will cap to 840px when window is 600px + padding (2x24px) */
-    /* Will cap to 1040px when window is 840px + padding (2x200px) */
-    @media screen and (min-width: 648px) { :host { max-inline-size: 840px } }
-    @media screen and (min-width: 1240px) { :host { max-inline-size: 1040px; } }
-
-    /* NAVRAIL */
-
-    :host([nav-rail]) {
-      grid-template-columns: repeat(4, 1fr);
-
-      max-inline-size: 600px;
-    }
-
-    /* Will set  8col when window is 600px + padding (2x24) + navrail (80)  */
-    /* Will set 12col when window is 840px + padding (2x24) + navrail (80) */
-    @media screen and (min-width: 728px) { :host([nav-rail]) { grid-template-columns: repeat(8, 1fr); } }
-    @media screen and (min-width: 968px) { :host([nav-rail]) { grid-template-columns: repeat(12, 1fr); } }
-
-    /* Will cap to  840px when window is 600px + padding (2x24px) + navrail (80) */
-    /* Will cap to 1040px when window is 840px + padding (2x200px) + navrail (80) */
-    @media screen and (min-width: 728px) { :host([nav-rail]) { max-inline-size: 840px } }
-    @media screen and (min-width: 1320px) { :host([nav-rail]) { max-inline-size: 1040px; } }
-
-    /* NAVDRAWER */
-
-    :host([nav-drawer]) {
-      grid-template-columns: repeat(4, 1fr);
-
-      max-inline-size: 600px;
-    }
-
-    /* Will set  8col when window is 600px + padding (2x24) + navdrawer (360)  */
-    /* Will set 12col when window is 840px + padding (2x24) + navdrawer (360) */
-    @media screen and (min-width: 1008px) { :host([nav-rail]) { grid-template-columns: repeat(8, 1fr); } }
-    @media screen and (min-width: 1248px) { :host([nav-rail]) { grid-template-columns: repeat(12, 1fr); } }
-
-    /* Will cap to  840px when window is 600px + padding (2x24px) + navrail (360) */
-    /* Will cap to 1040px when window is 840px + padding (2x200px) + navrail (360) */
-    @media screen and (min-width: 1008px) { :host([nav-rail]) { max-inline-size: 840px } }
-    @media screen and (min-width: 1600px) { :host([nav-rail]) { max-inline-size: 1040px; } }
-
-    /* FLEXIBLE */
-
-    :host([flexible]) {
-      grid-template-columns: repeat(4, 1fr);
-
-      max-inline-size: 600px;
-    }
-
-    /* Will set  8col when window is 600px + padding (2x24) + spacer (24) + fixed (360)  */
-    /* Will set 12col when window is 840px + padding (2x24) + spacer (24) + fixed (360) */
-    @media screen and (min-width: 1032px) { :host([flexible]) { grid-template-columns: repeat(8, 1fr); } }
-    @media screen and (min-width: 1272px) { :host([flexible]) { grid-template-columns: repeat(12, 1fr); } }
-
-    /* Will cap to 840px when window is 600px + padding (2x24px) + spacer (24) + fixed (360) */
-    /* Will cap to 1040px when window is 840px + padding (2x200px) + spacer (24) + fixed (360) */
-    @media screen and (min-width: 1032px) { :host([flexible]) { max-inline-size: 840px } }
-    @media screen and (min-width: 1624px) { :host([flexible]) { max-inline-size: 1040px; } }
-
-    /* FLEXIBLE + NAV RAIL */
-
-    :host([flexible]:where([nav-rail])) {
-      grid-template-columns: repeat(4, 1fr);
-
-      max-inline-size: 600px;
-    }
-
-    /* Will set  8col when window is 600px + padding (2x24) + spacer (24) + fixed (360) + navrail (80)   */
-    /* Will set 12col when window is 840px + padding (2x24) + spacer (24) + fixed (360) + navrail (80) */
-    @media screen and (min-width: 1112px) { :host([flexible]:where([nav-rail])) { grid-template-columns: repeat(8, 1fr); } }
-    @media screen and (min-width: 1352px) { :host([flexible]:where([nav-rail])) { grid-template-columns: repeat(12, 1fr); } }
-
-    /* Will cap to 840px when window is 600px + padding (2x24px) + spacer (24) + fixed (360) + navrail (80) */
-    /* Will cap to 1040px when window is 840px + padding (2x200px) + spacer (24) + fixed (360) + navrail (80) */
-    @media screen and (min-width: 1112px) { :host([flexible]:where([nav-rail])) { max-inline-size: 840px } }
-    @media screen and (min-width: 1704px) { :host([flexible]:where([nav-rail])) { max-inline-size: 1040px; } }
-
-    /* FLEXIBLE + NAV DRAWER */
-
-    :host([flexible]:where([nav-drawer])) {
-      grid-template-columns: repeat(4, 1fr);
-
-      max-inline-size: 600px;
-    }
-
-    /* Will set  8col when window is 600px + padding (2x24) + spacer (24) + fixed (360) + navdrawer (360)   */
-    /* Will set 12col when window is 840px + padding (2x24) + spacer (24) + fixed (360) + navdrawer (360) */
-    @media screen and (min-width: 1392px) { :host([flexible]:where([nav-drawer])) { grid-template-columns: repeat(8, 1fr); } }
-    @media screen and (min-width: 1632px) { :host([flexible]:where([nav-drawer])) { grid-template-columns: repeat(12, 1fr); } }
-
-    /* Will cap to 840px when window is 600px + padding (2x24px) + spacer (24) + fixed (360) + navdrawer (360) */
-    /* Will cap to 1040px when window is 840px + padding (2x200px) + spacer (24) + fixed (360) + navdrawer (360) */
-    @media screen and (min-width: 1392px) { :host([flexible]:where([nav-drawer])) { max-inline-size: 840px } }
-    @media screen and (min-width: 1984px) { :host([flexible]:where([nav-drawer])) { max-inline-size: 1040px; } }
-
-    /* SPLIT */
-
-    :host([split]) {
-      grid-template-columns: repeat(4, 1fr);
-
-      max-inline-size: 600px;
-    }
-
-    /* Will set  8col when window is 600px + padding (2x24) + spacer (24) + split (600)  */
-    /* Will set 12col when window is 840px + padding (2x24) + spacer (24) + split (840) */
-    @media screen and (min-width: 1272px) { :host([split]) { grid-template-columns: repeat(8, 1fr); } }
-    @media screen and (min-width: 1752px) { :host([split]) { grid-template-columns: repeat(12, 1fr); } }
-
-    /* Will cap to 840px when window is 600px + padding (2x24px) + spacer (24) + split (600) */
-    /* Will cap to 1040px when window is 840px + padding (2x200px) + spacer (24) + split (840) */
-    @media screen and (min-width: 1272px) { :host([split]) { max-inline-size: 840px } }
-    @media screen and (min-width: 2104px) { :host([split]) { max-inline-size: 1040px; } }
-
-    /* SPLIT + NAVRAIL */
-
-    :host([split]:where([nav-rail])) {
-      grid-template-columns: repeat(4, 1fr);
-
-      max-inline-size: 600px;
-    }
-
-    /* Will set  8col when window is 600px + padding (2x24) + spacer (24) + split (600) + navrail (80) */
-    /* Will set 12col when window is 840px + padding (2x24) + spacer (24) + split (840) + navrail (80) */
-    @media screen and (min-width: 1352px) { :host([split]:where([nav-rail])) { grid-template-columns: repeat(8, 1fr); } }
-    @media screen and (min-width: 1832px) { :host([split]:where([nav-rail])) { grid-template-columns: repeat(12, 1fr); } }
-
-    /* Will cap to 840px when window is 600px + padding (2x24px) + spacer (24) + split (600) + navrail (80) */
-    /* Will cap to 1040px when window is 840px + padding (2x200px) + spacer (24) + split (840) + navrail (80) */
-    @media screen and (min-width: 1352px) { :host([split]:where([nav-rail])) { max-inline-size: 840px } }
-    @media screen and (min-width: 2184px) { :host([split]:where([nav-rail])) { max-inline-size: 1040px; } }
-
-    /* SPLIT + NAVDRAWER */
-
-    :host([split]:where([nav-drawer])) {
-      grid-template-columns: repeat(4, 1fr);
-
-      max-inline-size: 600px;
-    }
-
-    /* Will set  8col when window is 600px + padding (2x24) + spacer (24) + split (600) + navdrawer (360)  */
-    /* Will set 12col when window is 840px + padding (2x24) + spacer (24) + split (840) + navdrawer (360) */
-    @media screen and (min-width: 1632px) { :host([split]:where([nav-drawer])) { grid-template-columns: repeat(8, 1fr); } }
-    @media screen and (min-width: 2112px) { :host([split]:where([nav-drawer])) { grid-template-columns: repeat(12, 1fr); } }
-
-    /* Will cap to 840px when window is 600px + padding (2x24px) + spacer (24) + split (600) + navdrawer (360) */
-    /* Will cap to 1040px when window is 840px + padding (2x200px) + spacer (24) + split (840) + navdrawer (360) */
-    @media screen and (min-width: 1632px) { :host([split]:where([nav-drawer])) { max-inline-size: 840px } }
-    @media screen and (min-width: 2464px) { :host([split]:where([nav-drawer])) { max-inline-size: 1040px; } }
-
-    :host([full-width]) {
-      max-inline-size: none;
-    }
-
-    /** FIXED **/
-
-    :host([fixed]) {
-      grid-template-columns: repeat(4, 1fr);
-
-      inline-size:360px;
-    }
-
-    @media screen and (max-width: 600px) {
-      :host(:nth-of-type(2)) {
-        display: none;
-      }
-    }
-    /* Will cap to 360px when window is 360px + padding (2x24px) + spacer (24) + 360px */
-    @media screen and (min-width: 792px) {
-      :host([fixed]) {
-        max-inline-size: 360px
-      }
-    }
-
-    #scrim {
-      position: absolute;
-      inset: 0;
-
-      grid-area: auto;
-    }
-
-    #slot::slotted(*) { grid-column: 1 / none }
-    #slot::slotted([colspan="1"]) { grid-column-end: span 1; }
-    #slot::slotted([colspan="2"]) { grid-column-end: span 2; }
-    #slot::slotted([colspan="3"]) { grid-column-end: span 3; }
-    #slot::slotted([colspan="4"]) { grid-column-end: span 4; }
-    #slot::slotted([colspan="5"]) { grid-column-end: span 5; }
-    #slot::slotted([colspan="6"]) { grid-column-end: span 6; }
-    #slot::slotted([colspan="7"]) { grid-column-end: span 7; }
-    #slot::slotted([colspan="8"]) { grid-column-end: span 8; }
-    #slot::slotted([colspan="9"]) { grid-column-end: span 9; }
-    #slot::slotted([colspan="10"]) { grid-column-end: span 10; }
-    #slot::slotted([colspan="11"]) { grid-column-end: span 11; }
-    #slot::slotted([colspan="12"]) { grid-column-end: span 12; }
-
-  `
-  .autoRegister('mdw-pane');