@shortfuse/materialdesignweb 0.9.0 → 0.9.2

package/package.json

@@ -7,49 +7,52 @@
   "bugs": {
     "url": "https://github.com/clshortfuse/materialdesignweb/issues"
   },
+  "customElements": "docs/custom-elements.json",
   "description": "Material Design for Web",
   "devDependencies": {
-    "@babel/preset-env": "^7.22.9",
+    "@babel/preset-env": "^7.26.9",
     "@esm-bundle/chai": "^4.3.4-fix.0",
-    "@playwright/test": "^1.36.1",
-    "@rollup/plugin-babel": "^6.0.3",
-    "@rollup/plugin-node-resolve": "^15.1.0",
-    "@rollup/plugin-terser": "^0.4.3",
-    "@stylistic/stylelint-plugin": "^3.0.0",
-    "@types/clean-css": "^4.2.6",
-    "@types/html-minifier-terser": "^7.0.0",
-    "@types/mocha": "^10.0.1",
-    "@types/tap": "^15.0.7",
-    "@typescript-eslint/eslint-plugin": "^7.3.1",
-    "@typescript-eslint/parser": "^7.3.1",
-    "@web/test-runner": "^0.18.1",
+    "@playwright/test": "^1.50.1",
+    "@rollup/plugin-babel": "^6.0.4",
+    "@rollup/plugin-node-resolve": "^15.3.1",
+    "@rollup/plugin-terser": "^0.4.4",
+    "@stylistic/stylelint-plugin": "^3.1.2",
+    "@types/clean-css": "^4.2.11",
+    "@types/html-minifier-terser": "^7.0.2",
+    "@types/mocha": "^10.0.10",
+    "@types/tap": "^15.0.12",
+    "@typescript-eslint/eslint-plugin": "^8.46.3",
+    "@typescript-eslint/parser": "^8.46.3",
+    "@web/test-runner": "^0.20.2",
     "@web/test-runner-commands": "^0.9.0",
     "@web/test-runner-playwright": "^0.11.0",
-    "acorn": "^8.8.2",
-    "acorn-walk": "^8.2.0",
+    "acorn": "^8.14.0",
+    "acorn-walk": "^8.3.4",
+    "ajv": "^8.17.1",
     "browserslist-to-esbuild": "^2.1.1",
-    "clean-css": "^5.3.2",
-    "element-internals-polyfill": "^1.1.11",
-    "esbuild": "^0.20.2",
+    "clean-css": "^5.3.3",
+    "custom-elements-manifest": "^2.1.0",
+    "element-internals-polyfill": "^1.3.13",
+    "esbuild": "^0.25.12",
     "esbuild-postcss": "^0.0.4",
-    "eslint": "^8.45.0",
+    "eslint": "^8.57.1",
     "eslint-config-airbnb-base": "^15.0.0",
-    "eslint-plugin-import": "^2.27.5",
-    "eslint-plugin-jsdoc": "^48.2.1",
-    "eslint-plugin-sort-class-members": "^1.15.2",
+    "eslint-plugin-import": "^2.31.0",
+    "eslint-plugin-jsdoc": "^48.11.0",
+    "eslint-plugin-sort-class-members": "^1.21.0",
     "eslint-plugin-unicorn": "^51.0.1",
-    "html-minifier-terser": "^7.1.0",
+    "html-minifier-terser": "^7.2.0",
     "http-server": "^14.1.1",
-    "magic-string": "^0.30.0",
+    "magic-string": "^0.30.17",
     "playwright": "^1.32.2",
     "postcss-jsx": "^0.36.4",
-    "rollup-plugin-output-size": "^1.2.1",
-    "rollup-plugin-serve": "^2.0.2",
-    "stylelint": "^16.8.1",
-    "stylelint-no-unsupported-browser-features": "^8.0.1",
-    "stylelint-order": "^6.0.2",
-    "stylelint-use-logical-spec": "^5.0.0",
-    "typescript": "^5.4.2"
+    "rollup-plugin-output-size": "^1.5.0",
+    "rollup-plugin-serve": "^2.0.3",
+    "stylelint": "^16.14.1",
+    "stylelint-no-unsupported-browser-features": "^8.0.4",
+    "stylelint-order": "^6.0.4",
+    "stylelint-use-logical-spec": "^5.0.1",
+    "typescript": "^5.7.3"
   },
   "exports": {
     "./constants/*": "./constants/*",
@@ -95,14 +98,18 @@
     "url": "git+https://github.com/clshortfuse/materialdesignweb.git"
   },
   "scripts": {
-    "docs": "node build/esbuild.js docs/demo.js --outdir=docs --minify --metafile",
-    "docs:rollup": "rollup -c build/rollup.config.js docs/demo.js --dir=docs --compact",
-    "predocs": "node bin/mdw-css.js --custom=yellow,orange:orange,green:0f0,alias:aqua | npx esbuild --minify --loader=css > docs/theme.css",
-    "predocs-alt": "node bin/mdw-css.js --color=a46750 --custom=yellow,orange:orange,green:0f0,alias:aqua | npx esbuild --minify --loader=css > docs/alt-theme.css",
-    "prepublishOnly": "node build/esbuild.js index.js --outdir=dist --minify --metafile --production",
+    "cem": "node scripts/cem-generate.js",
+    "demo": "node build/esbuild.js demo/demo.js --outdir=demo --minify --metafile",
+    "demo:rollup": "rollup -c build/rollup.config.js demo/demo.js --dir=demo --compact",
+    "build:index": "node build/esbuild.js index.js --outdir=dist --minify --metafile --production --format=iife",
+    "build:custom-element": "node build/esbuild.js core/CustomElement.js --outdir=dist --minify --metafile --production --format=esm",
+    "dist": "npm run build:index && npm run build:custom-element",
+    "predemo": "node bin/mdw-css.js --custom=yellow,orange:orange,green:0f0,alias:aqua | npx esbuild --minify --loader=css > demo/theme.css",
+    "predemo-alt": "node bin/mdw-css.js --color=a46750 --custom=yellow,orange:orange,green:0f0,alias:aqua | npx esbuild --minify --loader=css > demo/alt-theme.css",
+    "prepublishOnly": "npm run types && npm run cem && npm run dist",
     "pretest": "eslint --ignore-path .gitignore",
-    "serve": "node build/esbuild.js docs/demo.js --outdir=docs --metafile --serve --live --tree-shaking=true",
-    "serve:rollup": "rollup -c build/rollup.config.js docs/demo.js --dir=docs --watch --environment SERVE",
+    "serve": "node build/esbuild.js demo/demo.js --outdir=demo --metafile --serve --live --tree-shaking=true",
+    "serve:rollup": "rollup -c build/rollup.config.js demo/demo.js --dir=demo --watch --environment SERVE",
     "test": "web-test-runner \"test/**/*.test.js\" --node-resolve --playwright --browsers chromium firefox webkit --concurrency 1",
     "test:custom": "web-test-runner \"test/**/*.test.js\" --node-resolve --concurrency 1",
     "test:chromium": "web-test-runner \"test/**/*.test.js\" --node-resolve --playwright --browsers chromium",
@@ -113,16 +120,17 @@
     "test:watch": "web-test-runner \"test/**/*.test.js\" --node-resolve --concurrency 1 --watch",
     "test:path": "web-test-runner --node-resolve --playwright --browsers chromium firefox webkit --concurrency 1",
     "types": "rm -Rf types && tsc --emitDeclarationOnly",
-    "watch": "node build/esbuild.js docs/demo.js --outdir=docs --watch --metafile",
-    "sample": "node build/esbuild.js docs/sample/sample.js --outdir=docs/sample --watch --metafile --serve --live",
-    "benchmark": "node build/esbuild.js docs/benchmark/main.js --outdir=docs/benchmark --minify --production --metafile --serve --watch"
+    "watch": "node build/esbuild.js demo/demo.js --outdir=demo --watch --metafile",
+    "sample": "node build/esbuild.js demo/sample/sample.js --outdir=demo/sample --watch --metafile --serve --live",
+    "benchmark": "node build/esbuild.js demo/benchmark/main.js --outdir=demo/benchmark --minify --production --metafile --serve --watch",
+    "examples:serve": "npx http-server examples -c-1"
   },
   "sideEffects": [
     "./components/*.js",
     "./loaders/*.js",
     "./polyfills/*.js",
-    "./docs/custom.js",
-    "./docs/demo/*.js"
+    "./demo/custom.js",
+    "./demo/demo/*.js"
   ],
   "type": "module",
   "typesVersions": {
@@ -132,5 +140,5 @@
       ]
     }
   },
-  "version": "0.9.0"
-}
+  "version": "0.9.2"
+}

package/services/theme.js

@@ -236,7 +236,7 @@ export function generateShapeCSS(config = SHAPE_ROUNDED_DEFAULT) {
 
 /**
  * @param {string} content
- * @return {HTMLStyleElement } element
+ * @return {HTMLStyleElement} element
  */
 function addStyle(content) {
   const element = document.createElement('style');
@@ -288,12 +288,11 @@ export function setupTheme({ color = '#6750A4', custom = [], lightness = 'auto'
 export function themeOptionsFromSearchParams(searchParams) {
   const color = searchParams?.get('color') || '#6750A4';
 
-  /** @type {[string,string?][]} */
-  const custom = searchParams?.getAll('custom')
+  const custom = /** @type {[string,string?][]} */(searchParams?.getAll('custom')
     .flatMap((c) => c.split(','))
-    .map((c) => c.split(':')) ?? [];
+    .map((c) => c.split(':')) ?? []);
 
-  const lightness = searchParams?.get('lightness') ?? 'auto';
+  const lightness = /** @type {ThemeOptions['lightness']} */(searchParams?.get('lightness') ?? 'auto');
   return { color, custom, lightness };
 }
 

package/types/components/BottomAppBar.d.ts

@@ -1,11 +1,10 @@
 declare const _default: typeof import("../index.js").CustomElement & import("../core/CustomElement.js").Class<{
     _ariaRole: string;
 }, any[]> & import("../core/CustomElement.js").Class<{
-    onConnectAriaValues: Map<string, string>;
-    hasFiredConnected: boolean;
+    _onConnectAriaValues: Map<import("../mixins/AriaReflectorMixin.js").StringKeyOfARIAMixin<keyof ARIAMixin>, ARIAMixin[import("../mixins/AriaReflectorMixin.js").StringKeyOfARIAMixin<keyof ARIAMixin>]>;
 }, any[]> & import("../core/CustomElement.js").Class<{
-    readAriaProperty(name: keyof HTMLElement & keyof ElementInternals): string | ShadowRoot;
-    updateAriaProperty(name: keyof HTMLElement & keyof ElementInternals, value: string): void;
+    readAriaProperty(name: keyof HTMLElement & keyof ElementInternals): string | ShadowRoot | Element | readonly Element[];
+    updateAriaProperty<K extends StringKeyOfARIAMixin<keyof ARIAMixin>>(name: K, value: ARIAMixin[K]): void;
 }, any[]> & import("../core/CustomElement.js").Class<{
     kbdNav: string;
     _kbdFocusable: boolean;

package/types/components/BottomSheet.d.ts

@@ -9,11 +9,10 @@ declare const _default: typeof CustomElement & import("../core/CustomElement.js"
 }, any[]> & import("../core/CustomElement.js").Class<{
     _ariaRole: string;
 }, any[]> & import("../core/CustomElement.js").Class<{
-    onConnectAriaValues: Map<string, string>;
-    hasFiredConnected: boolean;
+    _onConnectAriaValues: Map<import("../mixins/AriaReflectorMixin.js").StringKeyOfARIAMixin<keyof ARIAMixin>, ARIAMixin[import("../mixins/AriaReflectorMixin.js").StringKeyOfARIAMixin<keyof ARIAMixin>]>;
 }, any[]> & import("../core/CustomElement.js").Class<{
-    readAriaProperty(name: keyof HTMLElement & keyof ElementInternals): string | ShadowRoot;
-    updateAriaProperty(name: keyof HTMLElement & keyof ElementInternals, value: string): void;
+    readAriaProperty(name: keyof HTMLElement & keyof ElementInternals): string | ShadowRoot | Element | readonly Element[];
+    updateAriaProperty<K extends StringKeyOfARIAMixin<keyof ARIAMixin>>(name: K, value: ARIAMixin[K]): void;
 }, any[]> & import("../core/CustomElement.js").Class<{
     disabled: boolean;
     focused: boolean;
@@ -58,6 +57,7 @@ declare const _default: typeof CustomElement & import("../core/CustomElement.js"
 }, any[]> & import("../core/CustomElement.js").Class<{
     shapeTop: boolean;
     modal: boolean;
+    fixed: boolean;
     open: boolean;
     expanded: boolean;
     _lastComputedBlockSize: number;
@@ -93,15 +93,41 @@ declare const _default: typeof CustomElement & import("../core/CustomElement.js"
         };
     };
 }, any[]> & import("../core/CustomElement.js").Class<{
+    /**
+     * Ensure a scrim is present when the sheet is modal and open.
+     * @param {boolean} [animate=false] - If true, animate scrim changes.
+     * @return {void}
+     */
     checkForScrim(animate?: boolean): void;
+    /**
+     * Evaluate drag state and settle the sheet (close or snap open).
+     * @return {void}
+     */
     checkDragFinished(): void;
-    /** @param {PointerEvent} event */
+    /**
+     * Pointer active on the drag handle; registers the pointer for dragging.
+     * @param {PointerEvent} event
+     * @return {void}
+     */
     onDragHandleActive(event: PointerEvent): void;
-    /** @param {PointerEvent} event */
+    /**
+     * Pointer inactive on the drag handle; finalizes potential drag.
+     * @param {PointerEvent} event
+     * @return {void}
+     */
     onDragHandleInactive(event: PointerEvent): void;
-    /** @param {PointerEvent|TouchEvent} event */
+    /**
+     * Handle pointer or touch move events during dragging.
+     * @param {PointerEvent|TouchEvent} event
+     * @return {void}
+     */
     onPointerOrTouchMove(event: PointerEvent | TouchEvent): void;
 }, any[]> & import("../core/CustomElement.js").Class<{
+    /**
+     * Called by ResizeObserverMixin when the element's size changes.
+     * @param {ResizeObserverEntry} entry
+     * @return {void}
+     */
     onResizeObserved(entry: ResizeObserverEntry): void;
 }, any[]>;
 export default _default;

package/types/components/BottomSheet.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BottomSheet.d.ts","sourceRoot":"","sources":["../../components/BottomSheet.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAuII,kCAAkC;YAAvB,YAAY;;cAAO;;IAG9B,qBAAqB;iBAAV,MAAM;IAEjB,qBAAqB;iBAAV,MAAM;;;;;;;;;;;;;;;IAgFjB,kCAAkC;8BAAtB,YAAY;IAQxB,kCAAkC;gCAAtB,YAAY;IAQxB,6CAA6C;gCAAjC,YAAY,GAAC,UAAU;;;;;0BA5Ob,0BAA0B"}
+{"version":3,"file":"BottomSheet.d.ts","sourceRoot":"","sources":["../../components/BottomSheet.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IA2JI,kCAAkC;YAAvB,YAAY;;cAAO;;IAG9B,qBAAqB;iBAAV,MAAM;IAEjB,qBAAqB;iBAAV,MAAM;;;;;;;;;;;;;IA8BjB;;;;OAIG;4BAFQ,OAAO,GACN,IAAI;IAyBhB;;;OAGG;yBADS,IAAI;IA6BhB;;;;OAIG;8BAFQ,YAAY,GACX,IAAI;IAShB;;;;OAIG;gCAFQ,YAAY,GACX,IAAI;IAShB;;;;OAIG;gCAFQ,YAAY,GAAC,UAAU,GACtB,IAAI;;IA4ChB;;;;OAIG;4BAFQ,mBAAmB,GAClB,IAAI;;;0BAnUM,0BAA0B"}