@getodk/web-forms 0.8.0 → 0.10.0

package/README.md

@@ -67,30 +67,55 @@ Individual test environments, and their corresponding watch modes, also have sep
 
 Upload XLSForm and XForm functionality in [`demo`](./src/demo/) app and in dev mode depends on [XLSForm-online](https://github.com/getodk/xlsform-online). Run the xlsform-online locally. By default it runs on port 8000, if you are running it on another port then you should update the [`config`](./src/demo/config.json) file.
 
-### Material Design
+### Styling Overview
 
-This package uses the Material Design system for the UI, though not strictly. The idea is to closely match the design to that of [ODK Collect](https://docs.getodk.org/collect-intro/).
+This project uses a combination of [PrimeFlex](https://primeflex.org/) and [PrimeVue](https://primevue.org/) for consistent styling, alongside specific font rules for the ODK Website's Web Forms Preview.
+
+- **PrimeFlex**: A CSS utility library used for layout-related properties such as positioning (e.g., flexbox, grid), responsive breakpoints, font-size and font-weight adjustments.
+- **PrimeVue**: A UI component library that defines the visual design of components, including shapes (e.g., borders, rounded corners) and color schemes.
+
+#### Theming with CSS Variables
+
+We use CSS variables for theming with two prefixes:
+
+- `--p-` Prefix: Variables prefixed with `--p-` (e.g., `--p-primary-50`) come from PrimeVue and control its component styles (e.g., colors, borders). These are part of PrimeVue’s [theming system](https://primevue.org/theming/styled/).
+- `--odk-` Prefix: Variables prefixed with `--odk-` (e.g., `--odk-font-family`) are custom to this project and manage styles outside PrimeVue or PrimeFlex, such as application-specific typography.
+
+#### Z-Index Layering System
+
+This package uses a centralized `z-index` layering system to manage UI stacking order, defined in `src/assets/css/style.scss`. The ODK variables (e.g., `--odk-z-index-error-banner`) ensure elements like floating error messages, form controls, and overlays stack correctly without overlap.
 
-It uses the [PrimeVue component library](https://primevue.org/).
+- **Key layers**:
 
-### Theme and Styles
+  - `--odk-z-index-base` (background)
+  - `--odk-z-index-form-content` (inputs, buttons)
+  - `--odk-z-index-form-floating` (highlights, tooltips)
+  - `--odk-z-index-error-banner` (floating errors)
+  - `--odk-z-index-overlay` (modals)
+  - `--odk-z-index-topmost` (loaders, notifications)
 
-We are using a customized version of the Material Light Indigo theme provided by PrimeVue.
+- **Usage**: Apply with `z-index: var(--odk-z-index-error-banner);` on positioned elements (e.g., `position: absolute`).
+
+#### Fonts
+
+Form elements use `font-family: Roboto, sans-serif;` for accessibility and a clean, readable appearance.
+
+#### Material Design
+
+This package uses the Material Design system for the UI, though not strictly. The idea is to closely match the design to that of [ODK Collect](https://docs.getodk.org/collect-intro/).
 
 ### Icons
 
-We use **Material Icons** using IcoMoon to select a subset of icons in order to minimize the size. The font files are located in [`./src/assets/fonts/`](./src/assets/fonts/), and the CSS is [`./src/assets/css/icomoon.css`](/src/assets/css/icomoon.css). Our IcoMoon definition is in the root directory of this package at [`./icomoon.json`](./icomoon.json).
+The `IconSVG` component renders Material Design Icons (MDI) with customizable size and style variants. It uses the `@mdi/js` library for icon data and supports a predefined set of icons.
 
-To update the icons using the [IcoMoon website](https://icomoon.io/app/):
+```js
+<IconSVG name="mdiCamera" size="md" variant="primary" />
+```
 
-1. Click the "Import Icons" button in IcoMoon. Select [`icomoon.json`](/icomoon.json). When prompted, load the settings stored in the file.
-2. Scroll down to the "Add Icons From Library" link and add **Material Icons**.
-3. Move the imported set above Material Icons, using the 3-bar icon to the right of the imported set's title. (This should help preserve the icon order and minimize the diff.)
-4. Update the icons by selecting (highlighting) the new icons to add. They don't need to be moved or altered.
-5. Download the new font, then copy the files (`icomoon.css`, `fonts/*`, `icomoon.json`) into their locations in the repository.
-   - You will need to rename the files and update the paths in the CSS (`fonts/icomoon.ttf?...` becomes `/fonts/icomoon.ttf?...` with a beginning slash).
-   - You will also need to prettify the JSON file to use two space indentation.
+To add a new icon:
 
-By following the steps above, you should minimize the diff. However, in the JSON file, you may still see changes for properties like `id`, `iconIdx`, `setId`, and `setIdx`.
+- Import the icon from `@mdi/js` in the `IconSVG` component.
+- Add the icon to the `iconMap` object with its corresponding name.
+- Use the icon by passing its name to the `name` prop.
 
 Material Icons are available under the Apache License Version 2.0. Copy of the license can be found at [`./src/assets/fonts/LICENSE-2.0.txt`](./src/assets/fonts/LICENSE-2.0.txt)

package/dist/__vite-browser-external-DYxpcVy9.js

@@ -0,0 +1,4 @@
+const e = {};
+export {
+  e as default
+};