@vaadin/vaadin-lumo-styles 24.0.0-alpha9 → 24.0.0-beta2

package/auto-complete.css

@@ -95,6 +95,9 @@
   --lumo-box-shadow-l: 0 3px 18px -2px var(--lumo-shade-20pct), 0 12px 48px -6px var(--lumo-shade-40pct);
   --lumo-box-shadow-xl: 0 4px 24px -3px var(--lumo-shade-20pct), 0 18px 64px -8px var(--lumo-shade-40pct);
   --lumo-clickable-cursor: default;
+  --vaadin-checkbox-size: calc(var(--lumo-size-m) / 2);
+  --vaadin-radio-button-size: calc(var(--lumo-size-m) / 2);
+  --vaadin-input-container-border-radius: var(--lumo-border-radius-m);
   --lumo-font-family: -apple-system, BlinkMacSystemFont, 'Roboto', 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
   --lumo-font-size-xxs: 0.75rem;
   --lumo-font-size-xs: 0.8125rem;

package/badge.js

@@ -25,6 +25,7 @@ const badge = css`
     text-transform: initial;
     letter-spacing: initial;
     min-width: calc(var(--lumo-line-height-xs) * 1em + 0.45em);
+    flex-shrink: 0;
   }
 
   /* Ensure proper vertical alignment */

package/mixins/required-field.js

@@ -45,7 +45,7 @@ const requiredField = css`
   }
 
   :host([required]) [part='required-indicator']::after {
-    content: var(--lumo-required-field-indicator, '•');
+    content: var(--lumo-required-field-indicator, '\\2022');
     transition: opacity 0.2s;
     color: var(--lumo-required-field-indicator-color, var(--lumo-primary-text-color));
     position: absolute;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/vaadin-lumo-styles",
-  "version": "24.0.0-alpha9",
+  "version": "24.0.0-beta2",
   "publishConfig": {
     "access": "public"
   },
@@ -41,8 +41,8 @@
   ],
   "dependencies": {
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/icon": "24.0.0-alpha9",
-    "@vaadin/vaadin-themable-mixin": "24.0.0-alpha9"
+    "@vaadin/icon": "24.0.0-beta2",
+    "@vaadin/vaadin-themable-mixin": "24.0.0-beta2"
   },
   "devDependencies": {
     "gulp": "^4.0.2",
@@ -51,5 +51,5 @@
     "gulp-sort": "^2.0.0",
     "gulp-svgmin": "^4.1.0"
   },
-  "gitHead": "cc3f747164041566b300bde4b105d2475649e93f"
+  "gitHead": "00086f1f6d487f042f189c9b9ecd7ba736960888"
 }

package/style.d.ts

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

package/style.js

@@ -25,8 +25,19 @@ const style = css`
   }
 `;
 
+/**
+ * Default values for component-specific custom properties.
+ */
+const globals = css`
+  html {
+    --vaadin-checkbox-size: calc(var(--lumo-size-m) / 2);
+    --vaadin-radio-button-size: calc(var(--lumo-size-m) / 2);
+    --vaadin-input-container-border-radius: var(--lumo-border-radius-m);
+  }
+`;
+
 const $tpl = document.createElement('template');
-$tpl.innerHTML = `<style>${style.toString().replace(':host', 'html')}</style>`;
+$tpl.innerHTML = `<style>${style.toString().replace(':host', 'html')}$</style>`;
 document.head.appendChild($tpl.content);
 
-export { style };
+export { globals, style };

package/typography.js

@@ -50,45 +50,34 @@ const typography = css`
     line-height: var(--lumo-line-height-xs);
   }
 
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
+  :where(h1, h2, h3, h4, h5, h6) {
     font-weight: 600;
     line-height: var(--lumo-line-height-xs);
-    margin-top: 1.25em;
+    margin: 0;
   }
 
-  h1 {
+  :where(h1) {
     font-size: var(--lumo-font-size-xxxl);
-    margin-bottom: 0.75em;
   }
 
-  h2 {
+  :where(h2) {
     font-size: var(--lumo-font-size-xxl);
-    margin-bottom: 0.5em;
   }
 
-  h3 {
+  :where(h3) {
     font-size: var(--lumo-font-size-xl);
-    margin-bottom: 0.5em;
   }
 
-  h4 {
+  :where(h4) {
     font-size: var(--lumo-font-size-l);
-    margin-bottom: 0.5em;
   }
 
-  h5 {
+  :where(h5) {
     font-size: var(--lumo-font-size-m);
-    margin-bottom: 0.25em;
   }
 
-  h6 {
+  :where(h6) {
     font-size: var(--lumo-font-size-xs);
-    margin-bottom: 0;
     text-transform: uppercase;
     letter-spacing: 0.03em;
   }

package/vaadin-iconset.js

@@ -3,14 +3,12 @@
  * Copyright (c) 2017 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import '@vaadin/icon/vaadin-iconset.js';
 import './version.js';
+import { Iconset } from '@vaadin/icon/vaadin-iconset.js';
 
 const template = document.createElement('template');
 
-template.innerHTML = `<vaadin-iconset name="lumo" size="1000">
-<svg xmlns="http://www.w3.org/2000/svg">
-<defs>
+template.innerHTML = `<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>
 <g id="lumo:align-left"><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 m0 191c0-18 13-33 28-33H638c16 0 29 15 29 33 0 18-13 33-29 34H195C179 442 167 427 167 408zM167 792c0-18 13-33 28-34H638c16 0 29 15 29 34s-13 33-29 33H195C179 825 167 810 167 792z m0-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>
 <g id="lumo:align-right"><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 m166 191c0-18 13-33 29-33H805c16 0 29 15 28 33 0 18-13 33-28 34H362C346 442 333 427 333 408zM333 792c0-18 13-33 29-34H805c16 0 29 15 28 34s-13 33-28 33H362C346 825 333 810 333 792z m-166-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>
@@ -53,8 +51,6 @@ template.innerHTML = `<vaadin-iconset name="lumo" size="1000">
 <g id="lumo:unordered-list"><path d="M146 325c-42 0-67-26-67-63 0-37 25-63 67-63 42 0 67 26 67 63 0 37-25 63-67 63z m0 250c-42 0-67-26-67-63 0-37 25-63 67-63 42 0 67 26 67 63 0 37-25 63-67 63z m0 250c-42 0-67-26-67-63 0-37 25-63 67-63 42 0 67 26 67 63 0 37-25 63-67 63zM333 258c0-18 15-33 34-33h516c18 0 33 15 34 33 0 18-15 33-34 34H367c-18 0-33-15-34-34z m0 250c0-18 15-33 34-33h516c18 0 33 15 34 33s-15 33-34 34H367c-18 0-33-15-34-34z m0 250c0-18 15-33 34-33h516c18 0 33 15 34 33s-15 33-34 34H367c-18 0-33-15-34-34z"></path></g>
 <g id="lumo:upload"><path d="M454 271V604c0 21-17 38-37 38s-38-17-38-38V271L254 382c-15 14-39 12-53-3-14-15-12-39 3-53L391 160c14-13 36-13 51-1 0 0 0 0 0 1l187 166c15 14 17 37 3 53-14 15-37 17-53 3L454 271zM675 704c0-21 17-38 37-37 21 0 38 17 38 37v92c0 21-17 38-38 37H121c-21 0-38-17-38-37v-92c0-21 17-38 38-37s38 17 37 37v54h517v-54z"></path></g>
 <g id="lumo:user"><path d="M500 500c-69 0-125-56-125-125s56-125 125-125 125 56 125 125-56 125-125 125z m-292 292c0-115 131-208 292-209s292 93 292 209H208z"></path></g>
-</defs>
-</svg>
-</vaadin-iconset>`;
+</defs></svg>`;
 
-document.head.appendChild(template.content);
+Iconset.register('lumo', 1000, template);

package/version.js

@@ -12,7 +12,7 @@
  */
 class Lumo extends HTMLElement {
   static get version() {
-    return '24.0.0-alpha9';
+    return '24.0.0-beta2';
   }
 }