@vaadin/vaadin-lumo-styles 25.0.0-alpha1 → 25.0.0-alpha10

package/src/components/map.css

@@ -0,0 +1,182 @@
+/**
+ * @license
+ * Copyright (c) 2000 - 2025 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+@media lumo_components_map {
+  :host {
+    font-family: var(--lumo-font-family);
+    font-size: var(--lumo-font-size-m);
+    --vaadin-map-controls-inset: var(--lumo-space-xs);
+    --vaadin-map-icon-zoom-in: var(--lumo-icons-plus);
+    --vaadin-map-icon-zoom-out: var(--lumo-icons-minus);
+    --vaadin-map-icon-compass: var(--lumo-icons-arrow-up);
+    --vaadin-map-icon-overview-map-collapse: var(--lumo-icons-angle-down);
+    --vaadin-map-icon-overview-map-expand: var(--lumo-icons-angle-up);
+    --vaadin-map-icon-close: var(--lumo-icons-cross);
+    --vaadin-map-icon-attribution-collapse: var(--lumo-icons-angle-right);
+    --_focus-ring-color: var(--vaadin-focus-ring-color, var(--lumo-primary-color-50pct));
+    --_focus-ring-width: var(--vaadin-focus-ring-width, 2px);
+  }
+
+  :host(:not([theme~='no-border'])) {
+    border-radius: var(--lumo-border-radius-l);
+  }
+
+  :host(:not([theme~='no-border']))::before {
+    border: 1px solid var(--lumo-contrast-10pct);
+  }
+
+  :host([focus-ring]) {
+    outline: none;
+    box-shadow: 0 0 0 var(--_focus-ring-width) var(--_focus-ring-color);
+  }
+
+  .ol-overviewmap button span:empty::before,
+  .ol-zoom-in:empty::before,
+  .ol-zoom-out:empty::before,
+  .ol-compass:empty::before,
+  .ol-full-screen button:empty::before,
+  .ol-full-screen-true:empty::before {
+    background: transparent;
+    mask-image: none;
+    display: inline;
+    width: auto;
+    height: auto;
+  }
+
+  .ol-control:not(.ol-uncollapsible):hover {
+    box-shadow: var(--lumo-box-shadow-s);
+    background-color: var(--lumo-shade-20pct);
+  }
+
+  .ol-scale-bar-inner {
+    border-radius: var(--lumo-border-radius-s);
+  }
+
+  .ol-compass:empty::before {
+    content: var(--vaadin-map-icon-compass);
+  }
+
+  .ol-full-screen {
+    height: var(--lumo-size-s);
+  }
+
+  .ol-full-screen button:empty::before {
+    content: var(--vaadin-map-icon-fullscreen, '\2922');
+  }
+
+  .ol-full-screen .ol-full-screen-true:empty::before {
+    content: var(--vaadin-map-icon-close, '\00D7');
+  }
+
+  .ol-overviewmap button span:empty::before {
+    content: var(--vaadin-map-icon-overview-map-collapse);
+  }
+
+  .ol-overviewmap.ol-collapsed button span:empty::before {
+    content: var(--vaadin-map-icon-overview-map-expand);
+  }
+
+  .ol-overviewmap-map {
+    margin: var(--lumo-space-xs);
+    border-radius: var(--lumo-border-radius-s);
+  }
+
+  .ol-overviewmap:not(.ol-collapsed),
+  .ol-overviewmap:not(.ol-collapsed):hover {
+    background-color: var(--lumo-base-color);
+    box-shadow: var(--lumo-box-shadow-s);
+    transition: 0.15s box-shadow;
+  }
+
+  .ol-overviewmap.ol-collapsed button {
+    rotate: none;
+  }
+
+  .ol-zoomslider button {
+    height: var(--lumo-space-m);
+  }
+
+  .ol-zoomslider:hover button {
+    box-shadow: var(--lumo-box-shadow-s);
+  }
+
+  .ol-control,
+  .ol-scale-bar,
+  .ol-scale-line {
+    margin: var(--lumo-space-xs);
+  }
+
+  .ol-control {
+    border-radius: var(--lumo-border-radius-m);
+    transition:
+      0.15s box-shadow,
+      0.15s background-color;
+    -webkit-backdrop-filter: blur(8px);
+  }
+
+  .ol-control:hover {
+    background-color: var(--lumo-base-color);
+  }
+
+  .ol-control button {
+    width: var(--lumo-size-s);
+    height: var(--lumo-size-s);
+    border-radius: inherit;
+    font-family: 'lumo-icons';
+    font-size: var(--lumo-icon-size-s);
+    font-weight: 400;
+  }
+
+  .ol-control button,
+  .ol-attribution:not(.ol-uncollapsible) ul {
+    display: block;
+    background-color: var(--lumo-base-color);
+    color: var(--lumo-body-text-color);
+  }
+
+  .ol-control button:hover {
+    color: var(--lumo-primary-text-color);
+  }
+
+  .ol-control button:active {
+    background: var(--lumo-base-color) linear-gradient(var(--lumo-contrast-5pct), var(--lumo-contrast-5pct));
+  }
+
+  .ol-control button:focus-visible {
+    outline: none;
+    box-shadow: 0 0 0 var(--_focus-ring-width) var(--_focus-ring-color);
+  }
+
+  .ol-zoom-in:empty::before {
+    content: var(--vaadin-map-icon-zoom-in);
+  }
+
+  .ol-zoom-out:empty::before {
+    content: var(--vaadin-map-icon-zoom-out);
+  }
+
+  .ol-attribution.ol-uncollapsible {
+    border-radius: var(--lumo-border-radius-m) 0 0 0;
+  }
+
+  .ol-attribution button span:empty::before {
+    content: var(--vaadin-map-icon-attribution-collapse, '\\25B8');
+  }
+
+  .ol-attribution.ol-collapsed button span:empty::before {
+    content: var(--vaadin-map-icon-attribution-expand, '\\2139');
+  }
+
+  .ol-attribution ul {
+    font-size: var(--lumo-font-size-xxs);
+    color: var(--lumo-secondary-text-color);
+    padding: var(--lumo-space-xs) var(--lumo-space-s);
+    cursor: default;
+  }
+
+  .ol-attribution:not(.ol-uncollapsible) ul {
+    background-color: var(--lumo-base-color);
+  }
+}

package/src/components/menu-bar-button.css

@@ -0,0 +1,128 @@
+/**
+ * @license
+ * Copyright (c) 2017 - 2025 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+@media lumo_components_menu-bar-button {
+  :host {
+    margin-block: calc(var(--lumo-space-xs) / 2);
+    margin-right: calc(var(--lumo-space-xs) / 2);
+    margin-left: 0;
+    border-radius: 0;
+  }
+
+  [part='label'] {
+    width: 100%;
+  }
+
+  /* NOTE(web-padawan): avoid using shorthand padding property for IE11 */
+  [part='label'] ::slotted(vaadin-menu-bar-item) {
+    justify-content: center;
+    background-color: transparent;
+    height: var(--lumo-button-size);
+    margin: 0 calc((var(--lumo-size-m) / 3 + var(--lumo-border-radius-m) / 2) * -1);
+    padding-left: calc(var(--lumo-size-m) / 3 + var(--lumo-border-radius-m) / 2);
+    padding-right: calc(var(--lumo-size-m) / 3 + var(--lumo-border-radius-m) / 2);
+  }
+
+  :host([theme~='small']) [part='label'] ::slotted(vaadin-menu-bar-item) {
+    min-height: var(--lumo-size-s);
+    margin: 0 calc((var(--lumo-size-s) / 3 + var(--lumo-border-radius-m) / 2) * -1);
+    padding-left: calc(var(--lumo-size-s) / 3 + var(--lumo-border-radius-m) / 2);
+    padding-right: calc(var(--lumo-size-s) / 3 + var(--lumo-border-radius-m) / 2);
+  }
+
+  :host([theme~='tertiary']) [part='label'] ::slotted(vaadin-menu-bar-item) {
+    margin: 0 calc((var(--lumo-button-size) / 6) * -1);
+    padding-left: calc(var(--lumo-button-size) / 6);
+    padding-right: calc(var(--lumo-button-size) / 6);
+  }
+
+  :host([theme~='tertiary-inline']) {
+    margin-top: calc(var(--lumo-space-xs) / 2);
+    margin-bottom: calc(var(--lumo-space-xs) / 2);
+    margin-right: calc(var(--lumo-space-xs) / 2);
+  }
+
+  :host([theme~='tertiary-inline']) [part='label'] ::slotted(vaadin-menu-bar-item) {
+    margin: 0;
+    padding: 0;
+  }
+
+  :host([first-visible]) {
+    border-radius: var(--lumo-border-radius-m) 0 0 var(--lumo-border-radius-m);
+
+    /* Needed to retain the focus-ring with border-radius */
+    margin-left: calc(var(--lumo-space-xs) / 2);
+  }
+
+  :host([last-visible]),
+  :host([slot='overflow']) {
+    border-radius: 0 var(--lumo-border-radius-m) var(--lumo-border-radius-m) 0;
+  }
+
+  :host([theme~='tertiary']),
+  :host([theme~='tertiary-inline']) {
+    border-radius: var(--lumo-border-radius-m);
+  }
+
+  :host([slot='overflow']) {
+    min-width: var(--lumo-button-size);
+    margin-inline-end: 0;
+    padding-left: calc(var(--lumo-button-size) / 4);
+    padding-right: calc(var(--lumo-button-size) / 4);
+  }
+
+  :host([slot='overflow']) ::slotted(*) {
+    font-size: var(--lumo-font-size-xl);
+  }
+
+  :host([slot='overflow']) [part='prefix'],
+  :host([slot='overflow']) [part='suffix'] {
+    margin-left: 0;
+    margin-right: 0;
+  }
+
+  :host([theme~='dropdown-indicators']:not([slot='overflow']):not([theme~='icon'])[aria-haspopup]) [part='suffix'] {
+    margin-inline-start: 0;
+    width: 1em;
+    height: 1em;
+    line-height: 1;
+    font-size: var(--lumo-icon-size-s);
+    position: relative;
+    inset-inline-start: 0.15em;
+  }
+
+  /* prettier-ignore */
+  :host([theme~='dropdown-indicators']:not([slot='overflow']):not([theme~='icon'])[aria-haspopup]) [part='suffix']::after {
+  font-family: lumo-icons;
+  content: var(--lumo-icons-dropdown);
+}
+
+  /* prettier-ignore */
+  :host([theme~='dropdown-indicators']:not([slot='overflow']):not([theme~='icon'])[theme~='tertiary'][aria-haspopup]) [part='suffix'] {
+  inset-inline-start: 0.05em;
+}
+
+  /* prettier-ignore */
+  :host([theme~='dropdown-indicators']:not([slot='overflow']):not([theme~='icon'])[theme~='tertiary-inline'][aria-haspopup]) [part='suffix'] {
+  inset-inline-start: 0;
+}
+
+  /* RTL styles */
+  :host([dir='rtl']) {
+    margin-left: calc(var(--lumo-space-xs) / 2);
+    margin-right: 0;
+    border-radius: 0;
+  }
+
+  :host([dir='rtl'][first-visible]) {
+    border-radius: 0 var(--lumo-border-radius-m) var(--lumo-border-radius-m) 0;
+    margin-right: calc(var(--lumo-space-xs) / 2);
+  }
+
+  :host([dir='rtl'][last-visible]),
+  :host([dir='rtl'][slot='overflow']) {
+    border-radius: var(--lumo-border-radius-m) 0 0 var(--lumo-border-radius-m);
+  }
+}

package/src/components/menu-bar-item.css

@@ -0,0 +1,23 @@
+/**
+ * @license
+ * Copyright (c) 2017 - 2025 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+@media lumo_components_menu-bar-item {
+  [part='content'] {
+    display: flex;
+    /* tweak to inherit centering from menu bar button */
+    align-items: inherit;
+    justify-content: inherit;
+  }
+
+  [part='content'] ::slotted(vaadin-icon) {
+    width: var(--lumo-icon-size-m);
+    height: var(--lumo-icon-size-m);
+  }
+
+  [part='content'] ::slotted(vaadin-icon[icon^='vaadin:']) {
+    padding: var(--lumo-space-xs);
+    box-sizing: border-box !important;
+  }
+}

package/src/components/menu-bar-overlay.css

@@ -0,0 +1,10 @@
+/**
+ * @license
+ * Copyright (c) 2017 - 2025 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+@media lumo_components_menu-bar-overlay {
+  :host(:first-of-type) {
+    padding-top: var(--lumo-space-xs);
+  }
+}

package/src/components/menu-bar.css

@@ -0,0 +1,31 @@
+/**
+ * @license
+ * Copyright (c) 2017 - 2025 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+@media lumo_components_menu-bar {
+  :host {
+    display: block;
+  }
+
+  :host([hidden]) {
+    display: none !important;
+  }
+
+  [part='container'] {
+    position: relative;
+    display: flex;
+    width: 100%;
+    flex-wrap: nowrap;
+    overflow: hidden;
+  }
+
+  :host([has-single-button]) ::slotted(vaadin-menu-bar-button) {
+    border-radius: var(--lumo-border-radius-m);
+  }
+
+  :host([theme~='end-aligned']) ::slotted(vaadin-menu-bar-button[first-visible]),
+  :host([theme~='end-aligned'][has-single-button]) ::slotted(vaadin-menu-bar-button) {
+    margin-inline-start: auto;
+  }
+}

package/src/components/message-input.css

@@ -0,0 +1,30 @@
+/**
+ * @license
+ * Copyright (c) 2000 - 2025 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+@media lumo_components_message-input {
+  :host {
+    align-items: flex-start;
+    box-sizing: border-box;
+    display: flex;
+    max-height: 50vh;
+    overflow: hidden;
+    flex-shrink: 0;
+    padding: var(--lumo-space-s) var(--lumo-space-m);
+  }
+
+  :host([hidden]) {
+    display: none !important;
+  }
+
+  ::slotted([slot='button']) {
+    flex-shrink: 0;
+  }
+
+  ::slotted([slot='textarea']) {
+    align-self: stretch;
+    flex-grow: 1;
+    margin-inline-end: var(--lumo-space-s);
+  }
+}

package/src/components/message.css

@@ -0,0 +1,82 @@
+/**
+ * @license
+ * Copyright (c) 2000 - 2025 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+@media lumo_components_message {
+  :host {
+    display: flex;
+    flex-direction: row;
+    outline: none;
+    color: var(--lumo-body-text-color);
+    font-family: var(--lumo-font-family);
+    font-size: var(--lumo-font-size-m);
+    line-height: var(--lumo-line-height-m);
+    padding: var(--lumo-space-s) var(--lumo-space-m);
+    -moz-osx-font-smoothing: grayscale;
+    -webkit-font-smoothing: antialiased;
+    -webkit-text-size-adjust: 100%;
+    --_focus-ring-color: var(--vaadin-focus-ring-color, var(--lumo-primary-color-50pct));
+    --_focus-ring-width: var(--vaadin-focus-ring-width, 2px);
+  }
+
+  :host([hidden]) {
+    display: none !important;
+  }
+
+  [part='content'] {
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+  }
+
+  [part='header'] {
+    align-items: baseline;
+    display: flex;
+    flex-flow: row wrap;
+    min-height: calc(var(--lumo-font-size-m) * var(--lumo-line-height-m));
+  }
+
+  [part='name'] {
+    font-weight: 500;
+    margin-right: var(--lumo-space-s);
+  }
+
+  [part='name']:empty {
+    margin-right: 0;
+  }
+
+  [part='message'] {
+    white-space: pre-wrap;
+  }
+
+  [part='time'] {
+    color: var(--lumo-secondary-text-color);
+    font-size: var(--lumo-font-size-s);
+  }
+
+  ::slotted([slot='avatar']) {
+    --vaadin-avatar-outline-width: 0;
+    --vaadin-avatar-size: var(--lumo-size-m);
+    flex-shrink: 0;
+    margin-top: calc(var(--lumo-space-s));
+    margin-inline-end: calc(var(--lumo-space-m));
+  }
+
+  ::slotted(vaadin-markdown) {
+    white-space: normal;
+  }
+
+  :host([focus-ring]) {
+    box-shadow: inset 0 0 0 var(--_focus-ring-width) var(--_focus-ring-color);
+  }
+
+  :host([dir='rtl']) [part='name'] {
+    margin-left: var(--lumo-space-s);
+    margin-right: 0;
+  }
+
+  :host([dir='rtl']) [part='name']:empty {
+    margin-left: 0;
+  }
+}

package/src/components/multi-select-combo-box-chip.css

@@ -0,0 +1,113 @@
+/**
+ * @license
+ * Copyright (c) 2017 - 2025 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+@media lumo_components_multi-select-combo-box-chip {
+  :host {
+    display: inline-flex;
+    align-items: center;
+    align-self: center;
+    white-space: nowrap;
+    box-sizing: border-box;
+    font-size: var(--lumo-font-size-xxs);
+    line-height: 1;
+    color: var(--lumo-body-text-color);
+    border-radius: var(--lumo-border-radius-s);
+    background-color: var(--lumo-contrast-20pct);
+    cursor: var(--lumo-clickable-cursor);
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+
+  :host([hidden]),
+  :host(:is([readonly], [disabled], [slot='overflow'])) [part='remove-button'] {
+    display: none !important;
+  }
+
+  :host([disabled]) {
+    background-color: var(--lumo-contrast-10pct);
+  }
+
+  :host([focused]) [part='remove-button'] {
+    color: inherit;
+  }
+
+  :host([slot='overflow']) {
+    position: relative;
+    min-width: var(--lumo-size-xxs);
+    margin-inline-start: var(--lumo-space-s);
+  }
+
+  :host([slot='overflow'])::before,
+  :host([slot='overflow'])::after {
+    position: absolute;
+    content: '';
+    width: 100%;
+    height: 100%;
+    border-left: calc(var(--lumo-space-s) / 4) solid var(--lumo-contrast-30pct);
+    border-radius: var(--lumo-border-radius-s);
+  }
+
+  :host([slot='overflow'])::before {
+    left: calc(-1 * var(--lumo-space-s) / 2);
+  }
+
+  :host([slot='overflow'])::after {
+    left: calc(-1 * var(--lumo-space-s));
+  }
+
+  :host([count='2']) {
+    margin-inline-start: calc(var(--lumo-space-s) / 2);
+  }
+
+  :host([count='2'])::after {
+    display: none;
+  }
+
+  :host([count='1']) {
+    margin-inline-start: 0;
+  }
+
+  :host([count='1'])::before,
+  :host([count='1'])::after {
+    display: none;
+  }
+
+  [part='label'] {
+    font-weight: 500;
+    line-height: 1.25;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  [part='remove-button'] {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-top: -0.3125em;
+    margin-bottom: -0.3125em;
+    margin-inline-start: auto;
+    width: 1.25em;
+    height: 1.25em;
+    font-size: 1.5em;
+    transition: none;
+  }
+
+  [part='remove-button']::before {
+    content: var(--lumo-icons-cross);
+  }
+
+  :host([disabled]) [part='label'] {
+    color: var(--lumo-disabled-text-color);
+    -webkit-text-fill-color: var(--lumo-disabled-text-color);
+    pointer-events: none;
+  }
+
+  @media (forced-colors: active) {
+    :host {
+      outline: 1px solid;
+      outline-offset: -1px;
+    }
+  }
+}

package/src/components/multi-select-combo-box-container.css

@@ -0,0 +1,20 @@
+/**
+ * @license
+ * Copyright (c) 2017 - 2025 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+@media lumo_components_multi-select-combo-box-container {
+  #wrapper {
+    display: flex;
+    width: 100%;
+    min-width: 0;
+  }
+
+  :host([auto-expand-vertically]) {
+    padding-block: var(--lumo-space-xs);
+  }
+
+  :host([auto-expand-vertically]) #wrapper {
+    flex-wrap: wrap;
+  }
+}

package/src/components/multi-select-combo-box-item.css

@@ -0,0 +1,13 @@
+/**
+ * @license
+ * Copyright (c) 2017 - 2025 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+@media lumo_components_multi-select-combo-box-item {
+  @media (any-hover: hover) {
+    :host(:hover[readonly]) {
+      background-color: transparent;
+      cursor: default;
+    }
+  }
+}

package/src/components/multi-select-combo-box-overlay.css

@@ -0,0 +1,18 @@
+/**
+ * @license
+ * Copyright (c) 2017 - 2025 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+@media lumo_components_multi-select-combo-box-overlay {
+  :host {
+    --_vaadin-multi-select-combo-box-items-container-border-width: var(--lumo-space-xs);
+    --_vaadin-multi-select-combo-box-items-container-border-style: solid;
+  }
+
+  #overlay {
+    width: var(
+      --vaadin-multi-select-combo-box-overlay-width,
+      var(--_vaadin-multi-select-combo-box-overlay-default-width, auto)
+    );
+  }
+}