@universal-material/web 3.6.21 → 3.6.23

package/dist/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@universal-material/web",
-  "version": "3.6.20",
+  "version": "3.6.23",
   "description": "Material web components",
   "type": "module",
   "keywords": [
@@ -13,11 +13,21 @@
     "typescript",
     "lit"
   ],
-  "module": "./index.js",
-  "typings": "./index.d.ts",
+  "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 script:build sass analyze copy && node remove-scripts-from-package.js",
+    "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",
@@ -40,7 +50,9 @@
     "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"
+    "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": {

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";

package/dist/scss/_reboot.scss

@@ -0,0 +1,498 @@
+@use "variables";
+
+@use "functions";
+@use "mixins";
+
+@mixin reboot() {
+  // stylelint-disable declaration-no-important, selector-no-qualifying-type, property-no-vendor-prefix
+
+
+  // Reboot
+  //
+  // Normalization of HTML elements, manually forked from Normalize.css to remove
+  // styles targeting irrelevant browsers while applying new styles.
+  //
+  // Normalize is licensed MIT. https://github.com/necolas/normalize.css
+
+
+  // Document
+  //
+  // Change from `box-sizing: content-box` so that `width` is not affected by `padding` or `border`.
+
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+  }
+
+
+  // Root
+  //
+  // Ability to the value of the root font sizes, affecting the value of `rem`.
+  // null by default, thus nothing is generated.
+
+  :root {
+    @if variables.$enable-smooth-scroll {
+      @media (prefers-reduced-motion: no-preference) {
+        scroll-behavior: smooth;
+      }
+    }
+  }
+
+
+  // Body
+  //
+  // 1. Remove the margin in all browsers.
+  // 2. As a best practice, apply a default `background-color`.
+  // 3. Prevent adjustments of font size after orientation changes in iOS.
+  // 4. Change the default tap highlight to be completely transparent in iOS.
+
+  // scss-docs-start reboot-body-rules
+  body {
+    --u-current-bg-color: var(--u-color-body);
+    background-color: var(--u-current-bg-color);
+    margin: 0; // 1
+    @include mixins.typo-prop(body-l, font-size);
+    @include mixins.typo-prop(body-l, font-weight);
+    line-height: 1.5;
+    text-align: start;
+    -webkit-text-size-adjust: 100%; // 3
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0); // 4
+  }
+  // scss-docs-end reboot-body-rules
+
+
+  // Content grouping
+  //
+  // 1. Reset Firefox's gray color
+
+  hr {
+    margin: 1rem 0;
+    color: inherit;
+    border: 0;
+    border-top: 1px solid;
+    opacity: 0.25;
+  }
+
+
+  // Typography
+  //
+  // 1. Remove top margins from headings
+  //    By default, `<h1>`-`<h6>` all receive top and bottom margins. We nuke the top
+  //    margin for easier control within type scales as it avoids margin collapsing.
+
+  h6, h5, h4, h3, h2, h1 {
+    margin-top: 0;
+    margin-bottom: 0.5rem;
+    font-weight: 500;
+    line-height: 1.2;
+  }
+
+  h1 {
+    font-size: calc(1.375rem + 1.5vw);
+  }
+  @media (min-width: 1200px) {
+    h1 {
+      font-size: 2.5rem;
+    }
+  }
+
+  h2 {
+    font-size: calc(1.325rem + 0.9vw);
+  }
+  @media (min-width: 1200px) {
+    h2 {
+      font-size: 2rem;
+    }
+  }
+
+  h3 {
+    font-size: calc(1.3rem + 0.6vw);
+  }
+  @media (min-width: 1200px) {
+    h3 {
+      font-size: 1.75rem;
+    }
+  }
+
+  h4 {
+    font-size: calc(1.275rem + 0.3vw);
+  }
+  @media (min-width: 1200px) {
+    h4 {
+      font-size: 1.5rem;
+    }
+  }
+
+  h5 {
+    font-size: 1.25rem;
+  }
+
+  h6 {
+    font-size: 1rem;
+  }
+
+  p {
+    margin-top: 0;
+    margin-bottom: 1rem;
+  }
+
+  abbr[title] {
+    -webkit-text-decoration: underline dotted;
+    text-decoration: underline dotted;
+    cursor: help;
+    -webkit-text-decoration-skip-ink: none;
+    text-decoration-skip-ink: none;
+  }
+
+  address {
+    margin-bottom: 1rem;
+    font-style: normal;
+    line-height: inherit;
+  }
+
+  ol,
+  ul {
+    padding-left: 2rem;
+  }
+
+  ol,
+  ul,
+  dl {
+    margin-top: 0;
+    margin-bottom: 1rem;
+  }
+
+  ol ol,
+  ul ul,
+  ol ul,
+  ul ol {
+    margin-bottom: 0;
+  }
+
+  dt {
+    font-weight: 700;
+  }
+
+  dd {
+    margin-bottom: 0.5rem;
+    margin-left: 0;
+  }
+
+  blockquote {
+    margin: 0 0 1rem;
+  }
+
+  b,
+  strong {
+    font-weight: bolder;
+  }
+
+  small {
+    font-size: 0.875em;
+  }
+
+
+  // Mark
+
+  mark {
+    padding: 0.1875em;
+    color: var(--u-color-on-warning);
+    background-color: var(--u-color-warning);
+  }
+
+
+  sub,
+  sup {
+    position: relative;
+    font-size: 0.75em;
+    line-height: 0;
+    vertical-align: baseline;
+  }
+
+  sub {
+    bottom: -0.25em;
+  }
+
+  sup {
+    top: -0.5em;
+  }
+
+  a {
+    color: #{functions.get-color-transparency-mix(var(--u-link-color, --u-color-primary), var(--u-text-opacity))};
+    text-decoration: none;
+
+    @media (hover: hover) {
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+  }
+
+  a:not([href]):not([class]), a:not([href]):not([class]):hover {
+    color: inherit;
+    text-decoration: none;
+  }
+
+  pre,
+  code,
+  kbd,
+  samp {
+    font-family: var(--u-font-monospace);
+    font-size: 1em;
+  }
+
+  pre {
+    display: block;
+    margin-top: 0;
+    margin-bottom: 1rem;
+    overflow: auto;
+    font-size: 0.875em;
+  }
+  pre code {
+    font-size: inherit;
+    color: inherit;
+    word-break: normal;
+  }
+
+  code {
+    font-size: 0.875em;
+    word-wrap: break-word;
+  }
+  a > code {
+    color: inherit;
+  }
+
+  kbd {
+    padding: 0.1875rem 0.375rem;
+    font-size: 0.875em;
+    color: var(--u-color-on-light);
+    background-color: var(--u-color-light);
+    font-weight: var(--u-font-weight-regular);
+    border-radius: 0.25rem;
+  }
+  kbd kbd {
+    padding: 0;
+    font-size: 1em;
+  }
+
+  figure {
+    margin: 0 0 1rem;
+  }
+
+  img,
+  svg {
+    vertical-align: middle;
+  }
+
+  table {
+    caption-side: bottom;
+    border-collapse: collapse;
+  }
+
+  caption {
+    padding-top: 0.5rem;
+    padding-bottom: 0.5rem;
+    color: #{functions.get-color-transparency-mix(currentColor, var(--u-low-emphasis-opacity))};
+    text-align: left;
+  }
+
+  th {
+    text-align: inherit;
+    text-align: -webkit-match-parent;
+  }
+
+  thead,
+  tbody,
+  tfoot,
+  tr,
+  td,
+  th {
+    border-color: inherit;
+    border-style: solid;
+    border-width: 0;
+  }
+
+  label {
+    display: inline-block;
+  }
+
+  button {
+    border-radius: 0;
+  }
+
+  button:focus:not(:focus-visible) {
+    outline: 0;
+  }
+
+  input,
+  button,
+  select,
+  optgroup,
+  textarea {
+    margin: 0;
+    font-family: inherit;
+    font-size: inherit;
+    line-height: inherit;
+  }
+
+  button,
+  select {
+    text-transform: none;
+  }
+
+  [role=button] {
+    cursor: pointer;
+  }
+
+  select {
+    word-wrap: normal;
+  }
+  select:disabled {
+    opacity: 1;
+  }
+
+  [list]:not([type=date]):not([type=datetime-local]):not([type=month]):not([type=week]):not([type=time])::-webkit-calendar-picker-indicator {
+    display: none !important;
+  }
+
+  button,
+  [type=button],
+  [type=reset],
+  [type=submit] {
+    -webkit-appearance: button;
+  }
+  button:not(:disabled),
+  [type=button]:not(:disabled),
+  [type=reset]:not(:disabled),
+  [type=submit]:not(:disabled) {
+    cursor: pointer;
+  }
+
+  ::-moz-focus-inner {
+    padding: 0;
+    border-style: none;
+  }
+
+  textarea {
+    resize: vertical;
+  }
+
+  fieldset {
+    min-width: 0;
+    padding: 0;
+    margin: 0;
+    border: 0;
+  }
+
+  legend {
+    float: left;
+    width: 100%;
+    padding: 0;
+    margin-bottom: 0.5rem;
+    font-size: calc(1.275rem + 0.3vw);
+    line-height: inherit;
+  }
+
+  // Fix height of inputs with a type of datetime-local, date, month, week, or time
+  // See https://github.com/twbs/bootstrap/issues/18842
+
+  ::-webkit-datetime-edit-fields-wrapper,
+  ::-webkit-datetime-edit-text,
+  ::-webkit-datetime-edit-minute,
+  ::-webkit-datetime-edit-hour-field,
+  ::-webkit-datetime-edit-day-field,
+  ::-webkit-datetime-edit-month-field,
+  ::-webkit-datetime-edit-year-field {
+    padding: 0;
+  }
+
+  ::-webkit-inner-spin-button {
+    height: auto;
+  }
+
+  // 1. This overrides the extra rounded corners on search inputs in iOS so that our
+  //    `.form-control` class can properly style them. Note that this cannot simply
+  //    be added to `.form-control` as it's not specific enough. For details, see
+  //    https://github.com/twbs/bootstrap/issues/11586.
+  // 2. Correct the outline style in Safari.
+
+  [type="search"] {
+    -webkit-appearance: textfield; // 1
+    outline-offset: -2px; // 2
+  }
+
+  // 1. A few input types should stay LTR
+  // See https://rtlstyling.com/posts/rtl-styling#form-inputs
+  // 2. RTL only output
+  // See https://rtlcss.com/learn/usage-guide/control-directives/#raw
+
+  /* rtl:raw:
+  [type="tel"],
+  [type="url"],
+  [type="email"],
+  [type="number"] {
+    direction: ltr;
+  }
+  */
+
+  // Remove the inner padding in Chrome and Safari on macOS.
+
+  ::-webkit-search-decoration {
+    -webkit-appearance: none;
+  }
+
+  // Remove padding around color pickers in webkit browsers
+
+  ::-webkit-color-swatch-wrapper {
+    padding: 0;
+  }
+
+
+  // 1. Inherit font family and line height for file input buttons
+  // 2. Correct the inability to style clickable types in iOS and Safari.
+
+  ::file-selector-button {
+    font: inherit; // 1
+    -webkit-appearance: button; // 2
+  }
+
+  // Correct element displays
+
+  output {
+    display: inline-block;
+  }
+
+  // Remove border from iframe
+
+  iframe {
+    border: 0;
+  }
+
+  // Summary
+  //
+  // 1. Add the correct display in all browsers
+
+  summary {
+    display: list-item; // 1
+    cursor: pointer;
+  }
+
+
+  // Progress
+  //
+  // Add the correct vertical alignment in Chrome, Firefox, and Opera.
+
+  progress {
+    vertical-align: baseline;
+  }
+
+
+  // Hidden attribute
+  //
+  // Always hide an element with the `hidden` HTML attribute.
+
+  [hidden] {
+    display: none !important;
+  }
+}

package/dist/scss/_utilities.scss

@@ -0,0 +1,4 @@
+@use "utilities/divider";
+@use "utilities/scheme";
+@use "utilities/spacing";
+@use "utilities/text";