fix: Fix BC material web pre14

.idea/codeception.xml

@@ -42,6 +42,12 @@
         <Configuration>
           <option name="path" value="$PROJECT_DIR$/tests" />
         </Configuration>
+        <Configuration>
+          <option name="path" value="$PROJECT_DIR$/tests" />
+        </Configuration>
+        <Configuration>
+          <option name="path" value="$PROJECT_DIR$/tests" />
+        </Configuration>
       </list>
     </option>
   </component>

.idea/inspectionProfiles/Project_Default.xml

@@ -174,7 +174,7 @@
     <inspection_tool class="HtmlUnknownTag" enabled="true" level="WARNING" enabled_by_default="true">
       <option name="myValues">
         <value>
-          <list size="25">
+          <list size="27">
             <item index="0" class="java.lang.String" itemvalue="nobr" />
             <item index="1" class="java.lang.String" itemvalue="noembed" />
             <item index="2" class="java.lang.String" itemvalue="comment" />
@@ -200,6 +200,8 @@
             <item index="22" class="java.lang.String" itemvalue="md-outlined-card" />
             <item index="23" class="java.lang.String" itemvalue="md-elevated-card" />
             <item index="24" class="java.lang.String" itemvalue="md-menu" />
+            <item index="25" class="java.lang.String" itemvalue="md-outlined-select" />
+            <item index="26" class="java.lang.String" itemvalue="md-filled-select" />
           </list>
         </value>
       </option>
@@ -457,4 +459,4 @@
     <inspection_tool class="bashproExecutableNoShebang" enabled="true" level="WARNING" enabled_by_default="true" />
     <inspection_tool class="bashproShebangNotExecutable" enabled="true" level="WARNING" enabled_by_default="true" />
   </profile>
-</component>
+</component>

.idea/phpspec.xml

@@ -41,6 +41,12 @@
       <PhpSpecSuiteConfiguration>
         <option name="myPath" value="$PROJECT_DIR$" />
       </PhpSpecSuiteConfiguration>
+      <PhpSpecSuiteConfiguration>
+        <option name="myPath" value="$PROJECT_DIR$" />
+      </PhpSpecSuiteConfiguration>
+      <PhpSpecSuiteConfiguration>
+        <option name="myPath" value="$PROJECT_DIR$" />
+      </PhpSpecSuiteConfiguration>
     </suites>
   </component>
 </project>

.idea/phpunit.xml

@@ -6,17 +6,6 @@
         <option value="$PROJECT_DIR$/tests/Unit" />
         <option value="$PROJECT_DIR$/tests/Feature" />
         <option value="$PROJECT_DIR$/tests" />
-        <option value="$PROJECT_DIR$/tests" />
-        <option value="$PROJECT_DIR$/tests" />
-        <option value="$PROJECT_DIR$/tests" />
-        <option value="$PROJECT_DIR$/tests" />
-        <option value="$PROJECT_DIR$/tests" />
-        <option value="$PROJECT_DIR$/tests" />
-        <option value="$PROJECT_DIR$/tests" />
-        <option value="$PROJECT_DIR$/tests" />
-        <option value="$PROJECT_DIR$/tests" />
-        <option value="$PROJECT_DIR$/tests" />
-        <option value="$PROJECT_DIR$/tests" />
       </list>
     </option>
   </component>

resources/scss/_material.scss

@@ -3,8 +3,8 @@
 @use "include-media/dist/include-media";
 
 md-icon svg {
-    width: var(--_with-icon-icon-size, var(--_icon-size, var(--_size)));
+    width: var(--_icon-size, var(--_size));
-    height: var(--_with-icon-icon-size, var(--_icon-size, var(--_size)));
+    height: var(--_icon-size, var(--_size));
     line-height: 0;
 }
 
@@ -14,8 +14,8 @@ md-icon svg {
     padding-left: 16px;
 
     svg {
-        width: var(--_list-item-leading-icon-size, var(--_with-icon-icon-size, var(--_icon-size, var(--_size))));
+        width: var(--_list-item-leading-icon-size, var(--_icon-size, var(--_size)));
-        height: var(--_list-item-leading-icon-size, var(--_with-icon-icon-size, var(--_icon-size, var(--_size))));
+        height: var(--_list-item-leading-icon-size, var(--_icon-size, var(--_size)));
     }
 }
 

resources/scss/theme/theme.scss

@@ -58,3 +58,7 @@ a {
 top-app-bar [slot="title"] {
     @extend .title-large;
 }
+
+md-filled-select::part(menu), md-outlined-select::part(menu) {
+    max-height: 300px;
+}

resources/ts/Components/FilledDateTextField.tsx

@@ -1,7 +1,7 @@
 import '@material/web/textfield/filled-text-field.js';
 import '@material/web/iconbutton/standard-icon-button.js';
 
-import {FilledTextField} from '@material/web/textfield/lib/filled-text-field';
+import {FilledTextField} from '@material/web/textfield/internal/filled-text-field';
 import {mdiCalendarMonthOutline} from '@mdi/js';
 import MdIcon from '@osm/Components/MdIcon';
 import {Vnode} from 'mithril';
@@ -19,6 +19,7 @@ export default class FilledDateTextField<A extends FilledDateTextFieldAttributes
     vnode.attrs.type ??= 'date';
     return (
       <md-filled-text-field {...vnode.attrs}>
+        {/* @ts-ignore */}
         {vnode.children}
         <md-standard-icon-button slot="trailingicon" onclick={this.openDatePicker.bind(this)}>
           <MdIcon icon={mdiCalendarMonthOutline}/>

resources/ts/Components/Pages/RecordPage.tsx

@@ -8,8 +8,7 @@ import {showSnackbar} from '@osm/utils/misc';
 import {Builder} from 'coloquent';
 import {
   Children,
-  Vnode,
+  Vnode
-  VnodeDOM
 } from 'mithril';
 import {Class} from 'type-fest';
 

resources/ts/Components/layout/DrawerEntry.tsx

@@ -2,7 +2,7 @@ import '@material/web/icon/icon.js';
 import '@material/web/list/list-item-link.js';
 
 import {router} from '@maicol07/inertia-mithril';
-import {ListItemLink} from '@material/web/list/lib/listitemlink/list-item-link';
+import {ListItemLink} from '@material/web/list/internal/listitemlink/list-item-link';
 import type * as MaterialIcons from '@mdi/js';
 import MdIcon from '@osm/Components/MdIcon';
 import {Vnode} from 'mithril';

resources/ts/Components/m3/FilledSelect.ts

@@ -1,55 +0,0 @@
-/**
- * @license
- * Copyright 2023 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
-
-import {css} from 'lit';
-import {customElement} from 'lit/decorators.js';
-
-import {styles as filledForcedColorsStyles} from '@material/web/select/lib/filled-forced-colors-styles.css.js';
-import {FilledSelect} from '@material/web/select/lib/filled-select.js';
-import {styles} from '@material/web/select/lib/filled-select-styles.css.js';
-import {styles as sharedStyles} from '@material/web/select/lib/shared-styles.css.js';
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'md-filled-select': MdFilledSelect;
-  }
-}
-
-/**
- * @summary
- * Select menus display a list of choices on temporary surfaces and display the
- * currently selected menu item above the menu.
- *
- * @description
- * The select component allows users to choose a value from a fixed list of
- * available options. Composed of an interactive anchor button and a menu, it is
- * analogous to the native HTML `<select>` element. This is the "filled"
- * variant.
- *
- * @example
- * ```html
- * <md-filled-select label="fruits">
- *   <!-- An empty selected option will give select an "un-filled" state -->
- *   <md-select-option selected></md-select-option>
- *   <md-select-option value="apple" headline="Apple"></md-select-option>
- *   <md-select-option value="banana" headline="Banana"></md-select-option>
- *   <md-select-option value="kiwi" headline="Kiwi"></md-select-option>
- *   <md-select-option value="orange" headline="Orange"></md-select-option>
- *   <md-select-option value="tomato" headline="Tomato"></md-select-option>
- * </md-filled-select>
- * ```
- *
- * @final
- * @suppress {visibility}
- */
-@customElement('md-filled-select')
-export default class MdFilledSelect extends FilledSelect {
-  static override styles = [sharedStyles, styles, filledForcedColorsStyles, css`
-    md-menu {
-      max-height: 300px;
-    }
-  `];
-}

resources/ts/Components/m3/NavigationDrawer.ts

@@ -1,6 +1,6 @@
-import {NavigationDrawer as MDNavigationDrawer} from '@material/web/labs/navigationdrawer/lib/navigation-drawer.js';
+import {NavigationDrawer as MDNavigationDrawer} from '@material/web/labs/navigationdrawer/internal/navigation-drawer.js';
-import {styles} from '@material/web/labs/navigationdrawer/lib/navigation-drawer-styles.css.js';
+import {styles} from '@material/web/labs/navigationdrawer/internal/navigation-drawer-styles.css.js';
-import {styles as sharedStyles} from '@material/web/labs/navigationdrawer/lib/shared-styles.css.js';
+import {styles as sharedStyles} from '@material/web/labs/navigationdrawer/internal/shared-styles.css.js';
 import {css} from 'lit';
 import {customElement} from 'lit/decorators.js';
 

resources/ts/Components/m3/NavigationDrawerModal.ts

@@ -1,6 +1,6 @@
-import {NavigationDrawerModal as MDNavigationDrawerModal} from '@material/web/labs/navigationdrawer/lib/navigation-drawer-modal.js';
+import {NavigationDrawerModal as MDNavigationDrawerModal} from '@material/web/labs/navigationdrawer/internal/navigation-drawer-modal.js';
-import {styles} from '@material/web/labs/navigationdrawer/lib/navigation-drawer-modal-styles.css.js';
+import {styles} from '@material/web/labs/navigationdrawer/internal/navigation-drawer-modal-styles.css.js';
-import {styles as sharedStyles} from '@material/web/labs/navigationdrawer/lib/shared-styles.css.js';
+import {styles as sharedStyles} from '@material/web/labs/navigationdrawer/internal/shared-styles.css.js';
 import {css} from 'lit';
 import {customElement} from 'lit/decorators.js';
 

resources/ts/Views/LoginPage.tsx

@@ -5,7 +5,7 @@ import '@material/web/checkbox/checkbox.js';
 import '@material/web/dialog/dialog.js';
 import '@material/web/textfield/filled-text-field.js';
 
-import {Dialog} from '@material/web/dialog/lib/dialog';
+import {Dialog} from '@material/web/dialog/internal/dialog';
 import {
   mdiAccountOutline,
   mdiEmailOutline,

resources/ts/Views/Setup/Steps/WelcomeStep.tsx

@@ -1,10 +1,10 @@
 import '@material/web/checkbox/checkbox.js';
 import '@material/web/field/outlined-field.js';
-import '@osm/Components/m3/FilledSelect';
+import '@material/web/select/filled-select.js';
 import '@material/web/select/select-option.js';
 
 import type {MdCheckbox} from '@material/web/checkbox/checkbox';
-import {Select} from '@material/web/select/lib/select';
+import {Select} from '@material/web/select/internal/select';
 import {mdiLicense} from '@mdi/js';
 import MdIcon from '@osm/Components/MdIcon';
 import {