@universal-material/web 3.6.22 → 3.6.23

package/dist/package.json

@@ -0,0 +1,139 @@
+{
+  "name": "@universal-material/web",
+  "version": "3.6.23",
+  "description": "Material web components",
+  "type": "module",
+  "keywords": [
+    "material",
+    "material design",
+    "design system",
+    "components",
+    "web-components",
+    "lit-element",
+    "typescript",
+    "lit"
+  ],
+  "main": "dist/index.js",
+  "module": "dist/esm/index.js",
+  "types": "dist/esm/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "dist/esm/index.js",
+      "default": "dist/index.js"
+    }
+  },
+  "files": ["dist"],
+  "scripts": {
+    "build": "run-s clean script:sass-to-ts build:esm build:bundle sass analyze copy",
+    "build:watch": "gulp -f gulpfile.js scripts:watch",
+    "build:esm": "esbuild src/index.ts --bundle --format=esm --minify --outfile=dist/index.js",
+    "build:bundle": "tsc",
+    "script:build": "tsc",
+    "script:sass-to-ts": "gulp -f gulpfile.js scripts:sass-to-ts",
+    "script:sass-to-ts:watch": "gulp -f gulpfile.js scripts:sass-to-ts:watch",
+    "sass": "gulp -f gulpfile.js sass",
+    "sass:watch": "gulp -f gulpfile.js sass:watch",
+    "clean": "rimraf ./dist/ rimraf ./src/**/*.d.ts rimraf ./src/**/*.styles.ts",
+    "copy": "copyfiles package.json README.md custom-elements.json vscode.html-custom-data.json dist/ && copyfiles -u 1 src/scss/**/*.scss dist/",
+    "lint": "npm run lint:lit-analyzer && npm run lint:eslint && npm run lint:prettier",
+    "lint:eslint": "eslint src/**/*.ts",
+    "lint:eslint:fix": "eslint src/**/*.ts --fix",
+    "lint:lit-analyzer": "lit-analyzer",
+    "lint:prettier": "prettier . --check",
+    "predocs": "run-p analyze docs:apis script:sass-to-ts",
+    "docs": "run-p build:watch docs:serve",
+    "docs:apis": "gulp -f gulpfile.js docs:apis",
+    "docs:apis:watch": "gulp -f gulpfile.js docs:apis:watch",
+    "docs:serve": "cd docs && ng serve",
+    "docs:build": "npm run predocs && cd docs && ng build",
+    "docs:watch": "npm run predocs && cd docs && ng build --watch --configuration development",
+    "analyze": "cem analyze --litelement --globs \"src/**/*.ts\" && node fix-html-custom-data-union-types.js",
+    "analyze:watch": "cem analyze --litelement --globs \"src/**/*.ts\" --watch",
+    "checksize": "rollup -c ; cat my-element.bundled.js | gzip -9 | wc -c ; rm my-element.bundled.js",
+    "prettier": "prettier . --write",
+    "publish": "npm run lint:eslint && npm publish",
+    "postinstall": "node -e \"const fs=require('fs');fs.existsSync('./change-compiler-to-add-custom-elements.js')&&require('./change-compiler-to-add-custom-elements.js')\""
+  },
+  "author": "https://github.com/universal-material/universal-material/graphs/contributors",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/universal-material/universal-material-web.git"
+  },
+  "license": "MIT",
+  "homepage": "https://universal-material.github.io",
+  "dependencies": {
+    "@bart-krakowski/get-week-info-polyfill": "^1.0.8",
+    "@lit-labs/virtualizer": "^2.1.1",
+    "@lit/context": "^1.1.5",
+    "@material/material-color-utilities": "^0.3.0",
+    "dompurify": "^3.2.6",
+    "lit": "^3.2.1",
+    "swiper": "^11.2.4"
+  },
+  "devDependencies": {
+    "@angular/build": "^20.0.4",
+    "@angular/cli": "^20.0.4",
+    "@angular/common": "^20.0.0",
+    "@angular/compiler": "^20.0.0",
+    "@angular/compiler-cli": "^20.0.0",
+    "@angular/core": "^20.0.0",
+    "@angular/elements": "^20.0.0",
+    "@angular/forms": "^20.0.0",
+    "@angular/platform-browser": "^20.0.0",
+    "@angular/router": "^20.0.0",
+    "@custom-elements-manifest/analyzer": "^0.10.4",
+    "@eslint/compat": "^1.2.7",
+    "@eslint/eslintrc": "^3.3.0",
+    "@eslint/js": "^9.21.0",
+    "@interactjs/types": "^1.10.27",
+    "@open-wc/testing": "^3.1.5",
+    "@rollup/plugin-node-resolve": "^15.2.3",
+    "@rollup/plugin-replace": "^5.0.5",
+    "@stylistic/eslint-plugin": "^3.1.0",
+    "@types/mocha": "^10.0.6",
+    "@typescript-eslint/eslint-plugin": "8.35.0",
+    "@typescript-eslint/parser": "8.35.0",
+    "@wc-toolkit/type-parser": "^1.1.0",
+    "@webcomponents/webcomponentsjs": "^2.8.0",
+    "angular-eslint": "^20.0.0",
+    "copyfiles": "^2.4.1",
+    "custom-element-vs-code-integration": "^1.5.0",
+    "eslint": "^9.21.0",
+    "eslint-plugin-import": "^2.31.0",
+    "eslint-plugin-import-helpers": "^2.0.1",
+    "eslint-plugin-jsdoc": "^50.6.3",
+    "eslint-plugin-prefer-arrow": "^1.2.3",
+    "eslint-plugin-unused-imports": "^4.1.4",
+    "gulp": "^4.0.2",
+    "gulp-changed": "^5.0.2",
+    "gulp-newer": "^1.4.0",
+    "gulp-notify": "^4.0.0",
+    "gulp-rename": "^2.1.0",
+    "gulp-sass": "^6.0.1",
+    "gulp-sourcemaps": "^3.0.0",
+    "gulp-typescript": "^5.0.1",
+    "highlight.js": "^11.11.1",
+    "html-entities": "^2.5.2",
+    "lit-analyzer": "^1.2.1",
+    "ngx-highlightjs": "^14.0.0",
+    "ngx-markdown": "^20.0.0",
+    "npm-run-all": "^4.1.5",
+    "prettier": "^3.6.2",
+    "prettier-plugin-organize-attributes": "^1.0.0",
+    "raw-loader": "^4.0.2",
+    "rimraf": "^3.0.2",
+    "rollup": "^2.73.0",
+    "rollup-plugin-summary": "^2.0.0",
+    "rollup-plugin-terser": "^7.0.2",
+    "rollup-plugin-typescript2": "^0.36.0",
+    "rxjs": "~7.8.0",
+    "sass": "^1.89.2",
+    "through2": "^4.0.2",
+    "ts-morph": "^22.0.0",
+    "tslib": "^2.6.2",
+    "typescript": "~5.8.2",
+    "typescript-eslint": "8.35.0",
+    "zone.js": "~0.15.0"
+  },
+  "customElements": "custom-elements.json"
+}

package/dist/scss/_api.scss

@@ -0,0 +1,2 @@
+@forward "mixins";
+@forward "functions";

package/dist/scss/_colors.scss

@@ -0,0 +1,2 @@
+@use "colors/text-bg";
+@use "colors/text";

package/dist/scss/_css-vars.scss

@@ -0,0 +1,53 @@
+@use "sass:map";
+
+@use "variables";
+@use "functions";
+@use "mixins";
+
+:root {
+  --u-state-layer-color: currentColor;
+  --u-state-layer-hover-opacity: 8%;
+  --u-state-layer-focus-opacity: 12%;
+  --u-state-layer-pressed-opacity: 12%;
+  --u-state-layer-dragged-opacity: 16%;
+
+  --u-high-emphasis-opacity: 100%;
+  --u-low-emphasis-opacity: 75%;
+  --u-lower-emphasis-opacity: 50%;
+
+  --u-color-body: #{functions.get-color-var(surface)};
+  --u-color-on-body: #{functions.get-color-var(on-surface)};
+
+  --u-font-family: #{variables.$font-family};
+  --u-font-monospace: #{variables.$font-mono};
+  --u-text-opacity: var(--u-high-emphasis-opacity);
+  --u-layout-margin: var(--u-layout-margin-default);
+  --u-layout-gutter: var(--u-layout-gutter-default);
+  --u-layout-margin-default: var(--u-spacing-medium);
+  --u-layout-gutter-default: var(--u-spacing-medium);
+
+
+  --u-color-high-emphasis: #{functions.get-color-transparency-mix(currentColor, var(--u-high-emphasis-opacity))} !important;
+  --u-color-low-emphasis: #{functions.get-color-transparency-mix(currentColor, var(--u-low-emphasis-opacity))} !important;
+  --u-color-lower-emphasis: #{functions.get-color-transparency-mix(currentColor, var(--u-lower-emphasis-opacity))} !important;
+
+  @each $name, $value in variables.$font-weights {
+    --u-font-weight-#{$name}: #{$value};
+  }
+
+  @each $name, $value in variables.$spacings {
+    --u-spacing-#{$name}: #{$value};
+  }
+
+  @each $name, $value in variables.$shape-corner {
+    --u-shape-corner-#{$name}: #{$value};
+  }
+}
+
+@include mixins.media-breakpoint-up(sm) {
+
+  :root {
+    --u-layout-margin-default: var(--u-spacing-large);
+    --u-layout-gutter-default: var(--u-spacing-large);
+  }
+}

package/dist/scss/_functions.scss

@@ -0,0 +1,29 @@
+@use "sass:map";
+
+@use "variables";
+
+@forward "functions/font";
+
+@function get-color-var($name) {
+  @return var(--u-color-#{$name}, map.get(variables.$colors, $name));
+}
+
+@function get-color-transparency-mix($color, $opacity) {
+  @return color-mix(in srgb, $color $opacity, transparent)
+}
+
+@function get-shape-corner-var($name) {
+  @return var(--u-shape-corner-#{$name}, map.get(variables.$shape-corner, $name));
+}
+
+@function get-spacing-var($name) {
+  @return var(--u-spacing-#{$name}, map.get(variables.$spacings, $name));
+}
+
+@function get-state-layer-opacity-var($name) {
+  @return var(--u-state-#{$name}-opacity, map.get(variables.$state-layer-opacity, $name));
+}
+
+@function hexToRgbString($hexColor) {
+  @return "#{red($hexColor)},#{green($hexColor)},#{blue($hexColor)}";
+}

package/dist/scss/_global.scss

@@ -0,0 +1,27 @@
+@use "functions";
+@use "mixins/text-bg";
+
+@mixin global-styles() {
+  :root {
+    color-scheme: light dark;
+  }
+
+  body {
+    @include text-bg.current-color-vars(--u-color-on-body);
+
+    background-color: var(--u-color-body);
+    color: var(--u-color-on-body);
+  }
+
+  a {
+    color: #{functions.get-color-transparency-mix(var(--u-color-primary), var(--u-high-emphasis-opacity))};
+    border-radius: #{functions.get-spacing-var(extra-small)};
+    text-decoration: none;
+
+    @media (hover: hover) {
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+  }
+}

package/dist/scss/_layout.scss

@@ -0,0 +1,5 @@
+@use "api";
+
+@use "layout/container";
+@use "layout/grid";
+@use "layout/margin-and-gutters";

package/dist/scss/_mixins.scss

@@ -0,0 +1,3 @@
+@forward "mixins/breakpoints";
+@forward "mixins/colors";
+@forward "mixins/typo";