update components & inputs docs

docs/components/Accordion.md

@@ -0,0 +1,25 @@
+---
+module: "@wq/material"
+purpose: lists
+---
+
+# Accordion
+
+[@wq/material]'s `<Accordion/>` [component][index] implements expansion panels / accordions.  `<Accordion/>` supports `summary`, `children`, `open` and `onOpen` props, converting as needed for web and native libaries.  `<Accordion/>` is analogous to `<details>` in HTML.
+
+> This component was named `ExpansionPanel` in earlier versions of wq.
+
+## Source
+
+While [@wq/react] defines a [placeholder implementation][react-src], [@wq/material]'s versions are more useful as reference:
+
+ * [Accordion.js (@wq/material-web)][material-web-src]
+ * [Accordion.js (@wq/material-native)][material-native-src]
+
+
+[index]: ./index.md
+[@wq/react]: ../@wq/react.md
+[@wq/material]: ../@wq/material.md
+[react-src]: https://github.com/wq/wq.app/blob/main/packages/react/src/components/Accordion.js
+[material-web-src]: https://github.com/wq/wq.app/blob/main/packages/material-web/src/components/Accordion.js
+[material-native-src]: https://github.com/wq/wq.app/blob/main/packages/material-native/src/components/Accordion.js

docs/components/App.md

@@ -13,11 +13,11 @@ The source code for `<App/>` is available here:
 
  * [App.js (@wq/react)][react-src]
 
-This base implementation is extended by (not replaced) by both [@wq/react] and [@wq/material], to integrate with [@material-ui/core], [react-native], and [react-native-paper]:
+This base implementation is extended by (not replaced) by both [@wq/react] and [@wq/material], to integrate with [@mui/material], [react-native], and [react-native-paper]:
 
- * [App.js (@wq/material)][material-src]
+ * [App.js (@wq/material-web)][material-web-src]
  * [App.native.js (@wq/react)][react-native-src]
- * [App.native.js (@wq/material)][material-native-src]
+ * [App.js (@wq/material-native)][material-native-src]
 
 [component]: ./index.md
 [Header]: ./Header.md
@@ -29,11 +29,11 @@ This base implementation is extended by (not replaced) by both [@wq/react] and [
 [@wq/react]: ../@wq/react.md
 [@wq/material]: ../@wq/material.md
 
-[@material-ui/core]: https://material-ui.com/
+[@mui/material]: https://mui.com/material-ui
 [react-native]: https://reactnative.dev/
 [react-native-paper]: https://callstack.github.io/react-native-paper/
 
 [react-src]: https://github.com/wq/wq.app/blob/main/packages/react/src/App.js
-[material-src]: https://github.com/wq/wq.app/blob/main/packages/material/src/App.js
+[material-web-src]: https://github.com/wq/wq.app/blob/main/packages/material-web/src/App.js
 [react-native-src]: https://github.com/wq/wq.app/blob/main/packages/react/src/App.native.js
-[material-native-src]: https://github.com/wq/wq.app/blob/main/packages/material/src/App.native.js
+[material-native-src]: https://github.com/wq/wq.app/blob/main/packages/material-native/src/App.js

docs/components/AutoBasemap.md

@@ -5,18 +5,17 @@ purpose: maps
 
 # AutoBasemap
 
-@wq/map's `<AutoBasemap/>` [component] selects the appropriate [basemap] component based on the [global basemaps definition][@wq/map].
+[@wq/map]'s `<AutoBasemap/>` [component][index] selects the appropriate [basemap] component based on the [global basemaps definition][@wq/map].
 
 ## Source
 
 The source code for `<AutoBasemap/>` is available here:
 
  * [AutoBasemap.js (@wq/map)][map-src]
 
-The [@wq/map] implementation automatically determines which actual basemap to render, so there is no alternate [@wq/map-gl] or native version.
+This component should not generally need to be overridden directly.
 
-[component]: ./index.md
-[basemap]: ../basemaps/index.md
+[index]: ./index.md
 [@wq/map]: ../@wq/map.md
-[@wq/map-gl]: ../@wq/map-gl.md
+[basemap]: ../basemaps/index.md
 [map-src]: https://github.com/wq/wq.app/blob/main/packages/map/src/components/AutoBasemap.js

docs/components/AutoForm.md

@@ -5,28 +5,24 @@ purpose: forms
 
 # AutoForm
 
-@wq/react's `<AutoForm/>` [component] generates a [`<Form/>`][Form] containing [`<AutoInput/>`][AutoInput]s for each field in the [form configuration][config]  corresponding to the current [route][@wq/router].  `<AutoForm/>` is primarily used with the [DefaultEdit] view, and should almost never be overridden directly.  Instead, it usually makes more sense to configure custom [input types][custom-input], [fieldsets], and or [nested repeat groups][nested-forms] for the fields you want to customize.
+[@wq/react]'s `<AutoForm/>` [component][index] generates a [`<Form/>`][Form] containing [`<AutoInput/>`][AutoInput]s for each field in the [form configuration][config]  corresponding to the current [route][@wq/router].  `<AutoForm/>` is primarily used with the [DefaultEdit] view, and should almost never be overridden directly.  Instead, it usually makes more sense to configure custom [input types][custom-input], [fieldsets], and or [nested repeat groups][nested-forms] for the fields you want to customize.
 
 ## Source
 
 The source code for `<AutoForm/>` is available here:
 
  * [AutoForm.js (@wq/react)][react-src]
 
-The [@wq/react] implementation leverages [`useComponents()`][useComponents] and [`<AutoInput/>`][AutoInput]  to facilitate customization, so there is no alternate [@wq/material] or native version.
+This component should not generally need to be overridden directly.
 
-[component]: ./index.md
-[Form]: ./Form.md
-[AutoInput]: ./AutoInput.md
-[config]: ../config.md
+[index]: ./index.md
+[@wq/react]: ../@wq/react.md
 [@wq/router]: ../@wq/router.md
+[AutoInput]: ./AutoInput.md
 [DefaultEdit]: ../views/DefaultEdit.md
-[@wq/react]: ../@wq/react.md
-[@wq/material]: ../@wq/material.md
-[useComponents]: ../hooks/useComponents.md
-
+[Form]: ./Form.md
+[config]: ../config.md
 [custom-input]: ../guides/define-a-custom-input-type.md
-[fieldsets]: ../guides/organize-inputs-into-fieldsets.md 
+[fieldsets]: ../guides/organize-inputs-into-fieldsets.md
 [nested-forms]: ../guides/implement-repeating-nested-forms.md
-
 [react-src]: https://github.com/wq/wq.app/blob/main/packages/react/src/components/AutoForm.js

docs/components/AutoInput.md

@@ -5,26 +5,22 @@ purpose: forms
 
 # AutoInput
 
-@wq/react's `<AutoInput/>` [component] selects the appropriate [input component][inputs] based on the provided props, which are passed from the [form configuration][config]).  `<AutoInput/>` is primarily used with [`<AutoForm/>`][AutoForm], and should never be overridden.  Instead, you can configure custom [input types][custom-input], [fieldsets], and or [nested repeat groups][nested-forms] for the fields you want to customize.
+[@wq/react]'s `<AutoInput/>` [component][index] selects the appropriate [input component][inputs] based on the provided props, which are passed from the [form configuration][config]).  `<AutoInput/>` is primarily used with [`<AutoForm/>`][AutoForm], and should never be overridden.  Instead, you can configure custom [input types][custom-input], [fieldsets], and or [nested repeat groups][nested-forms] for the fields you want to customize.
 
 ## Source
 
 The source code for `<AutoInput/>` is available here:
 
  * [AutoInput.js (@wq/react)][react-src]
 
-The [@wq/react] implementation automatically determines which actual input to render, so there is no alternate [@wq/material] or native version.
+This component should not generally need to be overridden directly.
 
-[component]: ./index.md
-[inputs]: ../inputs/index.md
-[Form]: ./Form.md
+[index]: ./index.md
+[@wq/react]: ../@wq/react.md
 [AutoForm]: ./AutoForm.md
 [config]: ../config.md
-[@wq/react]: ../@wq/react.md
-[@wq/material]: ../@wq/material.md
-
 [custom-input]: ../guides/define-a-custom-input-type.md
-[fieldsets]: ../guides/organize-inputs-into-fieldsets.md 
+[fieldsets]: ../guides/organize-inputs-into-fieldsets.md
+[inputs]: ../inputs/index.md
 [nested-forms]: ../guides/implement-repeating-nested-forms.md
-
 [react-src]: https://github.com/wq/wq.app/blob/main/packages/react/src/components/AutoInput.js

docs/components/AutoMap.md

@@ -5,7 +5,7 @@ purpose: maps
 
 # AutoMap
 
-@wq/map's `<AutoMap/>` [component] reads the [map configuration][@wq/map] corresponding to the current route and renders a [`<Map/>`][Map] with the appropriate inputs and controls
+[@wq/map]'s `<AutoMap/>` [component][index] reads the [map configuration][@wq/map] corresponding to the current route and renders a [`<Map/>`][Map] with the appropriate inputs and controls
 
 The typical component hierarchy generated by `<AutoMap/>` is as follows: 
 
@@ -35,13 +35,9 @@ The source code for `<AutoMap/>` is available here:
 
  * [AutoMap.js (@wq/map)][map-src]
 
-The [@wq/map] implementation leverages [`useComponents()`][useComponents] and [`useOverlayComponents()`][useOverlayComponents]  to facilitate customization, so there is no alternate [@wq/map-gl] or native version.
+This component should not generally need to be overridden directly.
 
-[component]: ./index.md
-[Map]: ./Map.md
+[index]: ./index.md
 [@wq/map]: ../@wq/map.md
-[@wq/map-gl]: ../@wq/map-gl.md
-[useComponents]: ../hooks/useComponents.md
-[useOverlayComponents]: ../hooks/useOverlayComponents.md
-
+[Map]: ./Map.md
 [map-src]: https://github.com/wq/wq.app/blob/main/packages/map/src/components/AutoMap.js

docs/components/AutoOverlay.md

@@ -5,18 +5,17 @@ purpose: maps
 
 # AutoOverlay
 
-@wq/map's `<AutoOverlay/>` [component] selects the appropriate [overlay] component based on the [layer configuration][@wq/map].
+[@wq/map]'s `<AutoOverlay/>` [component][index] selects the appropriate [overlay] component based on the [layer configuration][@wq/map].
 
 ## Source
 
 The source code for `<AutoOverlay/>` is available here:
 
  * [AutoOverlay.js (@wq/map)][map-src]
 
-The [@wq/map] implementation automatically determines which actual overlay to render, so there is no alternate [@wq/map-gl] or native version.
+This component should not generally need to be overridden directly.
 
-[component]: ./index.md
-[overlay]: ../overlays/index.md
+[index]: ./index.md
 [@wq/map]: ../@wq/map.md
-[@wq/map-gl]: ../@wq/map-gl.md
+[overlay]: ../overlays/index.md
 [map-src]: https://github.com/wq/wq.app/blob/main/packages/map/src/components/AutoOverlay.js

docs/components/AutoSubform.md

@@ -5,24 +5,21 @@ purpose: forms
 
 # AutoSubform
 
-@wq/react's `<AutoSubform/>` [component] generates a [`<Fieldset/>`][Fieldset] containing [`<AutoInput/>`][AutoInput]s for each of the fields in the specified group from the [form configuration][config]).  `<AutoSubform/>` is primarily used with [`<AutoForm/>`][AutoForm], and should never be overridden.  Instead, you can configure a custom [fieldset][fieldsets] and register it as the "appearance" for the group.
+[@wq/react]'s `<AutoSubform/>` [component][index] generates a [`<Fieldset/>`][Fieldset] containing [`<AutoInput/>`][AutoInput]s for each of the fields in the specified group from the [form configuration][config]).  `<AutoSubform/>` is primarily used with [`<AutoForm/>`][AutoForm], and should never be overridden.  Instead, you can configure a custom [fieldset][fieldsets] and register it as the "appearance" for the group.
 
 ## Source
 
 The source code for `<AutoSubform/>` is available here:
 
  * [AutoSubform.js (@wq/react)][react-src]
 
-The [@wq/react] implementation automatically determines which actual components to render, so there is no alternate [@wq/material] or native version.
+This component should not generally need to be overridden directly.
 
-[component]: ./index.md
-[Fieldset]: ./Fieldset.md
-[AutoInput]: ./AutoInput.md
+[index]: ./index.md
+[@wq/react]: ../@wq/react.md
 [AutoForm]: ./AutoForm.md
+[AutoInput]: ./AutoInput.md
+[Fieldset]: ./Fieldset.md
 [config]: ../config.md
-[@wq/react]: ../@wq/react.md
-[@wq/material]: ../@wq/material.md
-
-[fieldsets]: ../guides/organize-inputs-into-fieldsets.md 
-
+[fieldsets]: ../guides/organize-inputs-into-fieldsets.md
 [react-src]: https://github.com/wq/wq.app/blob/main/packages/react/src/components/AutoSubform.js

docs/components/AutoSubformArray.md

@@ -5,25 +5,22 @@ purpose: forms
 
 # AutoSubformArray
 
-@wq/react's `<AutoSubformArray/>` [component] generates a [`<FieldsetArray/>`][FieldsetArray] containing [`<AutoSubform/>`][AutoSubform]s for the specified repeat group from the [form configuration][config]).  `<AutoSubformArray/>` is primarily used with [`<AutoForm/>`][AutoForm], and should never be overridden.  Instead, you can configure a custom [fieldset array][nested-forms] and register it as the "appearance" for the repeat group.  If no custom fieldset array is registered, `<AutoSubformArray/>` will usually render the default [`<FieldsetArray/>`][FieldsetArray].  The one exception is if the repeat group only has a single file or photo field - in that case, [`<FileArray/>`][FileArray] will be rendered instead.
+[@wq/react]'s `<AutoSubformArray/>` [component][index] generates a [`<FieldsetArray/>`][FieldsetArray] containing [`<AutoSubform/>`][AutoSubform]s for the specified repeat group from the [form configuration][config]).  `<AutoSubformArray/>` is primarily used with [`<AutoForm/>`][AutoForm], and should never be overridden.  Instead, you can configure a custom [fieldset array][nested-forms] and register it as the "appearance" for the repeat group.  If no custom fieldset array is registered, `<AutoSubformArray/>` will usually render the default [`<FieldsetArray/>`][FieldsetArray].  The one exception is if the repeat group only has a single file or photo field - in that case, [`<FileArray/>`][FileArray] will be rendered instead.
 
 ## Source
 
 The source code for `<AutoSubformArray/>` is available here:
 
  * [AutoSubformArray.js (@wq/react)][react-src]
 
-The [@wq/react] implementation automatically determines which actual components to render, so there is no alternate [@wq/material] or native version.
+This component should not generally need to be overridden directly.
 
-[component]: ./index.md
-[FieldsetArray]: ./FieldsetArray.md
-[AutoSubform]: ./AutoSubform.md
+[index]: ./index.md
+[@wq/react]: ../@wq/react.md
 [AutoForm]: ./AutoForm.md
+[AutoSubform]: ./AutoSubform.md
+[FieldsetArray]: ./FieldsetArray.md
 [FileArray]: ./FileArray.md
 [config]: ../config.md
-[@wq/react]: ../@wq/react.md
-[@wq/material]: ../@wq/material.md
-
 [nested-forms]: ../guides/implement-repeating-nested-forms.md
-
 [react-src]: https://github.com/wq/wq.app/blob/main/packages/react/src/components/AutoSubformArray.js

docs/components/BasemapToggle.md

@@ -1,25 +1,21 @@
 ---
-module: "@wq/map-gl"
+module: "@wq/map"
 purpose: maps
 ---
 
 # BasemapToggle
 
-wq's `<BasemapToggle/>` [component] wraps [`<AutoBasemap/>`][AutoBasemap] with a radio switch that controls active state.
+[@wq/map]'s `<BasemapToggle/>` [component][index] wraps [`<AutoBasemap/>`][AutoBasemap] with a radio switch that controls active state.
 
 ## Source
 
-While [@wq/map] defines a [placeholder implementation][map-src], [@wq/map-gl] and [@wq/leaflet]'s versions are more useful as reference:
+The source code for `<BasemapToggle/>` is available here:
 
- * [AutoBasemap.js (@wq/map-gl)][mapgl-src]
- * [Legend.js (@wq/leaflet)][leaflet-src]
+ * [BasemapToggle.js (@wq/map)][map-src]
 
-[component]: ./index.md
-[AutoBasemap]: ./AutoBasemap.md
-[@wq/map]: ../@wq/map.md
-[@wq/map-gl]: ../@wq/map-gl.md
-[@wq/leaflet]: https://github.com/wq/wq.app/tree/v1.3.0/packages/leaflet
+This component should not generally need to be overridden directly.
 
-[map-src]: https://github.com/wq/wq.app/blob/main/packages/map/src/components/Legend.js
-[mapgl-src]: https://github.com/wq/wq.app/blob/main/packages/map-gl/src/components/BasemapToggle.js
-[leaflet-src]: https://github.com/wq/wq.app/blob/v1.3.0/packages/leaflet/src/components/Legend.js
+[index]: ./index.md
+[@wq/map]: ../@wq/map.md
+[AutoBasemap]: ./AutoBasemap.md
+[map-src]: https://github.com/wq/wq.app/blob/main/packages/map/src/components/BasemapToggle.js

docs/components/BottomNavigation.md

@@ -0,0 +1,25 @@
+---
+module: "@wq/material"
+purpose: navigation
+---
+
+# BottomNavigation
+
+[@wq/material]'s `<BottomNavigation/>` [component][index] can be used to add a persistent navbar with 2-5 icons to the bottom of the screen.
+
+## Source
+
+While [@wq/react] defines a [placeholder implementation][react-src], [@wq/material]'s versions are more useful as reference:
+
+ * [BottomNavigation.js (@wq/material-web)][material-web-src]
+ * [BottomNavigation.js (@wq/material-native)][material-native-src]
+
+> The @wq/material-web implementation just exports BottomNavigation from @mui/material.
+> The @wq/material-native implementation is currently just a placeholder.
+
+[index]: ./index.md
+[@wq/react]: ../@wq/react.md
+[@wq/material]: ../@wq/material.md
+[react-src]: https://github.com/wq/wq.app/blob/main/packages/react/src/components/BottomNavigation.js
+[material-web-src]: https://github.com/wq/wq.app/blob/main/packages/material-web/src/components/BottomNavigation.js
+[material-native-src]: https://github.com/wq/wq.app/blob/main/packages/material-native/src/components/BottomNavigation.js

docs/components/BottomNavigationAction.md

@@ -0,0 +1,25 @@
+---
+module: "@wq/material"
+purpose: navigation
+---
+
+# BottomNavigationAction
+
+[@wq/material]'s `<BottomNavigationAction/>` [component][index] is used to specify an individual tab and icon for [BottomNavigation].
+
+## Source
+
+While [@wq/react] defines a [placeholder implementation][react-src], [@wq/material]'s versions are more useful as reference:
+
+ * [BottomNavigationAction.js (@wq/material-web)][material-web-src]
+ * [BottomNavigationAction.js (@wq/material-native)][material-native-src]
+
+> The @wq/material-native implementation is currently just a placeholder.
+
+[index]: ./index.md
+[@wq/react]: ../@wq/react.md
+[@wq/material]: ../@wq/material.md
+[BottomNavigation]: ./BottomNavigation.md
+[react-src]: https://github.com/wq/wq.app/blob/main/packages/react/src/components/BottomNavigationAction.js
+[material-web-src]: https://github.com/wq/wq.app/blob/main/packages/material-web/src/components/BottomNavigationAction.js
+[material-native-src]: https://github.com/wq/wq.app/blob/main/packages/material-native/src/components/BottomNavigationAction.js

docs/components/Breadcrumbs.md

@@ -5,21 +5,21 @@ purpose: navigation
 
 # Breadcrumbs
 
-[@wq/material]'s `<Breadcrumbs/>` [component] uses the [useBreadcrumbs() hook][useBreadcrumbs] to provide link trail e.g. Home -> List -> Detail -> Edit.
+[@wq/material]'s `<Breadcrumbs/>` [component][index] uses the [useBreadcrumbs() hook][useBreadcrumbs] to provide link trail e.g. Home -> List -> Detail -> Edit.
 
 ## Source
 
 While [@wq/react] defines a [placeholder implementation][react-src], [@wq/material]'s versions are more useful as reference:
 
- * [Breadcrumbs.js (@wq/material)][material-src]
- * [Breadcrumbs.native.js (@wq/material)][material-native-src]
+ * [Breadcrumbs.js (@wq/material-web)][material-web-src]
+ * [Breadcrumbs.js (@wq/material-native)][material-native-src]
 
-[component]: ./index.md
+> The @wq/material-native implementation is currently just a placeholder.
+
+[index]: ./index.md
 [@wq/react]: ../@wq/react.md
 [@wq/material]: ../@wq/material.md
 [useBreadcrumbs]: ../hooks/useBreadcrumbs.md
-
 [react-src]: https://github.com/wq/wq.app/blob/main/packages/react/src/components/Breadcrumbs.js
-[material-src]: https://github.com/wq/wq.app/blob/main/packages/material/src/components/Breadcrumbs.js
-[material-native-src]: https://github.com/wq/wq.app/blob/main/packages/material/src/components/Breadcrumbs.native.js
-
+[material-web-src]: https://github.com/wq/wq.app/blob/main/packages/material-web/src/components/Breadcrumbs.js
+[material-native-src]: https://github.com/wq/wq.app/blob/main/packages/material-native/src/components/Breadcrumbs.js