@vaadin/vaadin-lumo-styles 23.2.0-dev.53560527d → 23.2.0

package/README.md

@@ -9,7 +9,7 @@
 
 Lumo contains foundational styles – typography, colors, visual style, sizing & spacing and icons – that components and applications can use to achieve a consistent visual design.
 
-[Documentation ↗](https://vaadin.com/docs/latest/ds/foundation)
+[Documentation ↗](https://vaadin.com/docs/latest/styling/lumo)
 
 ## License
 

package/badge.d.ts

@@ -1,3 +1,3 @@
-import { CSSResult } from 'lit';
+import type { CSSResult } from 'lit';
 
 export const badge: CSSResult;

package/color.d.ts

@@ -1,4 +1,4 @@
-import { CSSResult } from 'lit';
+import type { CSSResult } from 'lit';
 
 export const colorBase: CSSResult;
 

package/font-icons.js

@@ -5,9 +5,9 @@
  */
 import './version.js';
 
-const $_documentContainer = document.createElement('template');
+const template = document.createElement('template');
 
-$_documentContainer.innerHTML = `
+template.innerHTML = `
   <style>
     @font-face {
       font-family: 'lumo-icons';
@@ -63,4 +63,4 @@ $_documentContainer.innerHTML = `
   </style>
 `;
 
-document.head.appendChild($_documentContainer.content);
+document.head.appendChild(template.content);

package/iconset.js

@@ -10,9 +10,9 @@ console.warn(
   `WARNING: Since Vaadin 23.1, using <iron-icon> is deprecated. Please use <vaadin-icon> and '@vaadin/vaadin-lumo-styles/vaadin-iconset.js' instead.`,
 );
 
-const $_documentContainer = document.createElement('template');
+const template = document.createElement('template');
 
-$_documentContainer.innerHTML = `<iron-iconset-svg size="1000" name="lumo">
+template.innerHTML = `<iron-iconset-svg size="1000" name="lumo">
 <svg xmlns="http://www.w3.org/2000/svg">
 <defs>
 <g id="align-center"><path d="M167 217c0-18 17-33 38-34H795c21 0 38 15 38 34 0 18-17 33-38 33H205C184 250 167 235 167 217z m83 191c0-18 13-33 29-33H721c16 0 29 15 29 33 0 18-13 33-29 34H279C263 442 250 427 250 408zM250 792c0-18 13-33 29-34H721c16 0 29 15 29 34s-13 33-29 33H279C263 825 250 810 250 792z m-83-192c0-18 17-33 38-33H795c21 0 38 15 38 33s-17 33-38 33H205C184 633 167 618 167 600z" fill-rule="evenodd" clip-rule="evenodd"></path></g>
@@ -61,4 +61,4 @@ $_documentContainer.innerHTML = `<iron-iconset-svg size="1000" name="lumo">
 </svg>
 </iron-iconset-svg>`;
 
-document.head.appendChild($_documentContainer.content);
+document.head.appendChild(template.content);

package/mixins/field-button.d.ts

@@ -1,3 +1,3 @@
-import { CSSResult } from 'lit';
+import type { CSSResult } from 'lit';
 
 export const fieldButton: CSSResult;

package/mixins/helper.d.ts

@@ -3,6 +3,6 @@
  * Copyright (c) 2017 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { CSSResult } from 'lit';
+import type { CSSResult } from 'lit';
 
 export const helper: CSSResult;

package/mixins/input-field-shared.d.ts

@@ -3,7 +3,7 @@
  * Copyright (c) 2017 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { CSSResult } from 'lit';
+import type { CSSResult } from 'lit';
 
 export const inputField: CSSResult;
 

package/mixins/loader.d.ts

@@ -0,0 +1,3 @@
+import type { CSSResult } from 'lit';
+
+export const loader: CSSResult;

package/mixins/loader.js

@@ -0,0 +1,52 @@
+/**
+ * @license
+ * Copyright (c) 2022 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import '../color.js';
+import '../sizing.js';
+import { css } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+
+const loader = css`
+  [part~='loader'] {
+    box-sizing: border-box;
+    width: var(--lumo-icon-size-s);
+    height: var(--lumo-icon-size-s);
+    border: 2px solid transparent;
+    border-color: var(--lumo-primary-color-10pct) var(--lumo-primary-color-10pct) var(--lumo-primary-color)
+      var(--lumo-primary-color);
+    border-radius: calc(0.5 * var(--lumo-icon-size-s));
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  :host(:not([loading])) [part~='loader'] {
+    display: none;
+  }
+
+  :host([loading]) [part~='loader'] {
+    animation: 1s linear infinite lumo-loader-rotate, 0.3s 0.1s lumo-loader-fade-in both;
+  }
+
+  @keyframes lumo-loader-fade-in {
+    0% {
+      opacity: 0;
+    }
+
+    100% {
+      opacity: 1;
+    }
+  }
+
+  @keyframes lumo-loader-rotate {
+    0% {
+      transform: rotate(0deg);
+    }
+
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+`;
+
+export { loader };

package/mixins/menu-overlay.d.ts

@@ -1,4 +1,4 @@
-import { CSSResult } from 'lit';
+import type { CSSResult } from 'lit';
 
 export const menuOverlay: CSSResult[];
 

package/mixins/overlay.d.ts

@@ -1,3 +1,3 @@
-import { CSSResult } from 'lit';
+import type { CSSResult } from 'lit';
 
 export const overlay: CSSResult;

package/mixins/required-field.d.ts

@@ -1,3 +1,3 @@
-import { CSSResult } from 'lit';
+import type { CSSResult } from 'lit';
 
 export const requiredField: CSSResult;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/vaadin-lumo-styles",
-  "version": "23.2.0-dev.53560527d",
+  "version": "23.2.0",
   "publishConfig": {
     "access": "public"
   },
@@ -14,13 +14,13 @@
   "author": "Vaadin Ltd",
   "homepage": "https://vaadin.com/components",
   "bugs": {
-    "url": "https://github.com/vaadin/vaadin-lumo-styles/issues"
+    "url": "https://github.com/vaadin/web-components/issues"
   },
   "main": "all-imports.js",
   "module": "all-imports.js",
   "type": "module",
   "scripts": {
-    "icons": "gulp icons"
+    "icons": "gulp icons --gulpfile gulpfile.cjs"
   },
   "files": [
     "*.d.ts",
@@ -42,8 +42,8 @@
     "@polymer/iron-icon": "^3.0.0",
     "@polymer/iron-iconset-svg": "^3.0.0",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/icon": "23.2.0-dev.53560527d",
-    "@vaadin/vaadin-themable-mixin": "23.2.0-dev.53560527d"
+    "@vaadin/icon": "^23.2.0",
+    "@vaadin/vaadin-themable-mixin": "^23.2.0"
   },
   "devDependencies": {
     "gulp": "^4.0.2",
@@ -52,5 +52,5 @@
     "gulp-sort": "^2.0.0",
     "gulp-svgmin": "^4.1.0"
   },
-  "gitHead": "6c5c18369b09e22e76365d8a8a5e4bbb220f969b"
+  "gitHead": "8b1f5941f26ac41ca038e75e24c8584e331bc7a8"
 }

package/presets/compact.js

@@ -5,9 +5,9 @@
  */
 import '../sizing.js';
 import '../spacing.js';
-const $_documentContainer = document.createElement('template');
+const template = document.createElement('template');
 
-$_documentContainer.innerHTML = `
+template.innerHTML = `
   <style>
     /* Use a stronger selector so that imports added later do not override the property values */
     html:not(div) {
@@ -37,4 +37,4 @@ $_documentContainer.innerHTML = `
   </style>
 `;
 
-document.head.appendChild($_documentContainer.content);
+document.head.appendChild(template.content);

package/sizing.d.ts

@@ -1,3 +1,3 @@
-import { CSSResult } from 'lit';
+import type { CSSResult } from 'lit';
 
 export const sizing: CSSResult;

package/spacing.d.ts

@@ -1,3 +1,3 @@
-import { CSSResult } from 'lit';
+import type { CSSResult } from 'lit';
 
 export const spacing: CSSResult;

package/style.d.ts

@@ -1,3 +1,3 @@
-import { CSSResult } from 'lit';
+import type { CSSResult } from 'lit';
 
 export const style: CSSResult;

package/typography.d.ts

@@ -1,4 +1,4 @@
-import { CSSResult } from 'lit';
+import type { CSSResult } from 'lit';
 
 export const font: CSSResult;
 

package/user-colors.d.ts

@@ -3,6 +3,6 @@
  * Copyright (c) 2017 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { CSSResult } from 'lit';
+import type { CSSResult } from 'lit';
 
 export const userColors: CSSResult;

package/utility.d.ts

@@ -1,3 +1,3 @@
-import { CSSResult } from 'lit';
+import type { CSSResult } from 'lit';
 
 export const utility: CSSResult;

package/vaadin-iconset.js

@@ -6,9 +6,9 @@
 import '@vaadin/icon/vaadin-iconset.js';
 import './version.js';
 
-const $_documentContainer = document.createElement('template');
+const template = document.createElement('template');
 
-$_documentContainer.innerHTML = `<vaadin-iconset name="lumo" size="1000">
+template.innerHTML = `<vaadin-iconset name="lumo" size="1000">
 <svg xmlns="http://www.w3.org/2000/svg">
 <defs>
 <g id="lumo:align-center"><path d="M167 217c0-18 17-33 38-34H795c21 0 38 15 38 34 0 18-17 33-38 33H205C184 250 167 235 167 217z m83 191c0-18 13-33 29-33H721c16 0 29 15 29 33 0 18-13 33-29 34H279C263 442 250 427 250 408zM250 792c0-18 13-33 29-34H721c16 0 29 15 29 34s-13 33-29 33H279C263 825 250 810 250 792z m-83-192c0-18 17-33 38-33H795c21 0 38 15 38 33s-17 33-38 33H205C184 633 167 618 167 600z" fill-rule="evenodd" clip-rule="evenodd"></path></g>
@@ -57,4 +57,4 @@ $_documentContainer.innerHTML = `<vaadin-iconset name="lumo" size="1000">
 </svg>
 </vaadin-iconset>`;
 
-document.head.appendChild($_documentContainer.content);
+document.head.appendChild(template.content);

package/version.js

@@ -5,7 +5,7 @@
  */
 class Lumo extends HTMLElement {
   static get version() {
-    return '23.2.0-alpha1';
+    return '23.2.0';
   }
 }
 

package/gulpfile.js

@@ -1,216 +0,0 @@
-/* eslint-env node */
-'use strict';
-
-const gulp = require('gulp');
-const sort = require('gulp-sort');
-const iconfont = require('gulp-iconfont');
-const fs = require('fs');
-const svgpath = require('svgpath');
-const svgmin = require('gulp-svgmin');
-
-/**
- * Normalize file sort order across platforms (OS X vs Linux, maybe others).
- *
- * Before: `[..., 'eye-disabled', 'eye', ...]`
- * After:  `[..., 'eye', 'eye-disabled', ...]`
- *
- * Order of appearance impacts assigned Unicode codepoints, and sometimes build diffs.
- *
- * @see https://github.com/nfroidure/svgicons2svgfont/pull/82
- * @see https://github.com/nfroidure/svgicons2svgfont/blob/master/src/filesorter.js
- * @see http://support.ecisolutions.com/doc-ddms/help/reportsmenu/ascii_sort_order_chart.htm
- */
-function sortIconFilesNormalized(file1, file2) {
-  return file1.replace(/-/g, '~').localeCompare(file2.replace(/-/g, '~'), 'en-US');
-}
-
-function createCopyright() {
-  return `/**
- * @license
- * Copyright (c) 2017 - 2022 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */`;
-}
-
-function createIconset(folder, filenames, idPrefix = '') {
-  let output = `<svg xmlns="http://www.w3.org/2000/svg">\n<defs>\n`;
-  filenames.forEach((filename) => {
-    // Skip non-svg files
-    if (filename.indexOf('.svg') === -1) {
-      return;
-    }
-
-    const content = fs.readFileSync(folder + filename, 'utf-8');
-    const path = content.match(/<path( fill-rule="evenodd" clip-rule="evenodd")* d="([^"]*)"/);
-    if (path) {
-      const newPath = new svgpath(path[2])
-        .scale(1000 / 24, 1000 / 24)
-        .round(0)
-        .toString();
-      const name = filename.replace('.svg', '').replace(/\s/g, '-').toLowerCase();
-      const attrs = path[1] !== undefined ? path[1] : '';
-      output += `<g id="${idPrefix}${name}"><path d="${newPath}"${attrs}></path></g>\n`;
-    } else {
-      throw new Error(`Unexpected SVG content: ${filename}`);
-    }
-  });
-
-  output += `</defs>\n</svg>`;
-  return output;
-}
-
-gulp.task('icons', async () => {
-  const folder = 'icons/svg/';
-  let glyphs;
-
-  // Optimize the source files
-  gulp
-    .src(`${folder}*.svg`)
-    .pipe(
-      svgmin({
-        plugins: [
-          {
-            removeTitle: true,
-          },
-          {
-            removeViewBox: false,
-          },
-          {
-            cleanupNumericValues: {
-              floatPrecision: 6,
-            },
-          },
-          {
-            convertPathData: {
-              floatPrecision: 6,
-            },
-          },
-        ],
-      }),
-    )
-    .pipe(gulp.dest(folder))
-    .on('finish', () => {
-      // Iron-iconset-svg
-      fs.readdir(folder, (err, filenames) => {
-        if (err) {
-          console.error(err);
-          return;
-        }
-
-        filenames.sort(sortIconFilesNormalized);
-
-        const ironIcons = `${createCopyright()}
-import '@polymer/iron-iconset-svg/iron-iconset-svg.js';
-import './version.js';
-
-const $_documentContainer = document.createElement('template');
-
-$_documentContainer.innerHTML = \`<iron-iconset-svg size="1000" name="lumo">
-${createIconset(folder, filenames)}
-</iron-iconset-svg>\`;\n\ndocument.head.appendChild($_documentContainer.content);\n`;
-
-        fs.writeFile('iconset.js', ironIcons, (err) => {
-          if (err) {
-            return console.error(err);
-          }
-        });
-
-        const vaadinIcons = `${createCopyright()}
-import '@vaadin/icon/vaadin-iconset.js';
-import './version.js';
-
-const $_documentContainer = document.createElement('template');
-
-$_documentContainer.innerHTML = \`<vaadin-iconset name="lumo" size="1000">
-${createIconset(folder, filenames, 'lumo:')}
-</vaadin-iconset>\`;\n\ndocument.head.appendChild($_documentContainer.content);\n`;
-
-        fs.writeFile('vaadin-iconset.js', vaadinIcons, (err) => {
-          if (err) {
-            return console.error(err);
-          }
-        });
-      });
-
-      // Icon font
-      gulp
-        .src(`${folder}*.svg`)
-        .pipe(
-          sort({
-            comparator(file1, file2) {
-              return sortIconFilesNormalized(file1.relative, file2.relative);
-            },
-          }),
-        )
-        .pipe(
-          iconfont({
-            fontName: 'lumo-icons',
-            formats: ['woff'],
-            fontHeight: 1000,
-            ascent: 850,
-            descent: 150,
-            fixedWidth: true,
-            normalize: true,
-            timestamp: 1, // Truthy!
-          }),
-        )
-        .on('glyphs', (glyphData) => {
-          // Store for later use
-          glyphs = glyphData;
-        })
-        .pipe(gulp.dest('.'))
-        .on('finish', () => {
-          // Generate base64 version of the font
-          const lumoIconsWoff = fs.readFileSync('lumo-icons.woff');
-
-          // Write the output to font-icons.js
-          let output = createCopyright();
-          output += `
-import './version.js';
-
-const $_documentContainer = document.createElement('template');
-
-$_documentContainer.innerHTML = \`
-  <style>
-    @font-face {
-      font-family: 'lumo-icons';
-      src: url(data:application/font-woff;charset=utf-8;base64,${lumoIconsWoff.toString('base64')}) format('woff');
-      font-weight: normal;
-      font-style: normal;
-    }
-
-    html {
-`;
-          glyphs.forEach((g) => {
-            const name = g.name.replace(/\s/g, '-').toLowerCase();
-            const unicode = `\\\\${g.unicode[0].charCodeAt(0).toString(16)}`;
-            output += `      --lumo-icons-${name}: "${unicode}";\n`;
-          });
-          output += `    }
-  </style>
-\`;
-
-document.head.appendChild($_documentContainer.content);
-`;
-          fs.writeFile('font-icons.js', output, (err) => {
-            if (err) {
-              return console.error(err);
-            }
-          });
-
-          const list = glyphs.map((g) => g.name);
-          fs.writeFile('test/glyphs.json', JSON.stringify(list, null, 2), (err) => {
-            if (err) {
-              return console.error(err);
-            }
-          });
-
-          // Cleanup
-          fs.unlink('lumo-icons.woff', (err) => {
-            if (err) {
-              return console.error(err);
-            }
-          });
-        });
-    });
-});