@vaadin/vaadin-lumo-styles 25.0.0-alpha5 → 25.0.0-alpha7

package/src/mixins/field-base.css

@@ -0,0 +1,187 @@
+/**
+ * @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_mixins_field-base {
+  :host {
+    display: inline-flex;
+    outline: none;
+    --lumo-text-field-size: var(--lumo-size-m);
+    color: var(--vaadin-input-field-value-color, var(--lumo-body-text-color));
+    font-size: var(--vaadin-input-field-value-font-size, var(--lumo-font-size-m));
+    font-family: var(--lumo-font-family);
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    -webkit-tap-highlight-color: transparent;
+    padding: var(--lumo-space-xs) 0;
+    --_focus-ring-color: var(--vaadin-focus-ring-color, var(--lumo-primary-color-50pct));
+    --_focus-ring-width: var(--vaadin-focus-ring-width, 2px);
+    --_input-height: var(--vaadin-input-field-height, var(--lumo-text-field-size));
+    --_disabled-value-color: var(--vaadin-input-field-disabled-value-color, var(--lumo-disabled-text-color));
+  }
+
+  :host::before {
+    content: '\2003';
+    width: 0;
+    /* Size and position this element on the same vertical position as the input-field element
+          to make vertical align for the host element work as expected */
+    height: var(--_input-height);
+    box-sizing: border-box;
+    display: inline-flex;
+    align-items: center;
+  }
+
+  [class$='container'] {
+    display: flex;
+    flex-direction: column;
+    min-width: 100%;
+    max-width: 100%;
+    width: var(--vaadin-field-default-width, 12em);
+  }
+
+  :host([hidden]) {
+    display: none !important;
+  }
+
+  :host([focused]) [part='input-field'] ::slotted(:is(input, textarea)) {
+    mask-image: none;
+  }
+
+  ::slotted(:is(input, textarea):placeholder-shown) {
+    color: var(--vaadin-input-field-placeholder-color, var(--lumo-secondary-text-color));
+  }
+
+  /* Hover */
+  :host(:hover:not([readonly]):not([focused]):not([disabled])) [part='input-field']::after {
+    opacity: var(--vaadin-input-field-hover-highlight-opacity, 0.1);
+  }
+
+  /* Touch device adjustment */
+  @media (pointer: coarse) {
+    :host(:hover:not([readonly]):not([focused]):not([disabled])) [part='input-field']::after {
+      opacity: 0;
+    }
+
+    :host(:active:not([readonly]):not([focused]):not([disabled])) [part='input-field']::after {
+      opacity: 0.2;
+    }
+  }
+
+  /* Trigger when not focusing using the keyboard */
+  :host([focused]:not([focus-ring]):not([readonly])) [part='input-field']::after {
+    transform: scaleX(0);
+    transition-duration: 0.15s, 1s;
+  }
+
+  /* Opt-in focus-ring when using pointer devices */
+  /* This applies a focus-ring as box-shadow when the element is focused, but
+   the ring is only visible / has a width when the respective CSS property is
+   "enabled" using a value of 1 */
+  :host([focused]) [part='input-field'] {
+    /* Borders are implemented using box-shadows as well. To avoid overriding
+     the border on focus, even if the pointer focus-ring is disabled, we need to:
+     - Duplicate the border box shadow for this rule
+     - Remove the border (by using width of 0) when the focus-ring is visible,
+       which is the same behavior as for the keyboard focus-ring below
+     - Apply the border when the focus ring is not visible
+  */
+    --_pointer-focus-visible: clamp(0, var(--lumo-input-field-pointer-focus-visible, 0), 1);
+    --_conditional-border-width: calc(calc(1 - var(--_pointer-focus-visible)) * var(--_input-border-width));
+    --_conditional-focus-ring-width: calc(var(--_pointer-focus-visible) * var(--_focus-ring-width));
+    box-shadow:
+      inset 0 0 0 var(--_conditional-border-width) var(--_input-border-color),
+      0 0 0 var(--_conditional-focus-ring-width) var(--_focus-ring-color);
+  }
+
+  /* Focus-ring when using keyboard navigation */
+  :host([focus-ring]) [part='input-field'] {
+    box-shadow: 0 0 0 var(--_focus-ring-width) var(--_focus-ring-color);
+  }
+
+  /* Read-only and disabled */
+  :host(:is([readonly], [disabled])) ::slotted(:is(input, textarea):placeholder-shown) {
+    opacity: 0;
+  }
+
+  /* Read-only style */
+  :host([readonly]) {
+    --vaadin-input-field-border-color: transparent;
+  }
+
+  /* Disabled style */
+  :host([disabled]) {
+    pointer-events: none;
+    --vaadin-input-field-border-color: var(--lumo-contrast-20pct);
+  }
+
+  :host([disabled]) [part='label'],
+  :host([disabled]) [part='input-field'] ::slotted([slot$='fix']) {
+    color: var(--lumo-disabled-text-color);
+    -webkit-text-fill-color: var(--lumo-disabled-text-color);
+  }
+
+  :host([disabled]) [part='input-field'] ::slotted(:not([slot$='fix'])) {
+    color: var(--_disabled-value-color);
+    -webkit-text-fill-color: var(--_disabled-value-color);
+  }
+
+  /* Invalid style */
+  :host([invalid]) {
+    --vaadin-input-field-border-color: var(--lumo-error-color);
+    --_focus-ring-color: var(--lumo-error-color-50pct);
+  }
+
+  :host([input-prevented]) [part='input-field'] {
+    animation: shake 0.15s infinite;
+  }
+
+  @keyframes shake {
+    25% {
+      transform: translateX(4px);
+    }
+
+    75% {
+      transform: translateX(-4px);
+    }
+  }
+
+  /* Small theme */
+  :host([theme~='small']) {
+    font-size: var(--lumo-font-size-s);
+    --lumo-text-field-size: var(--lumo-size-s);
+  }
+
+  :host([theme~='small']) [part='label'] {
+    font-size: var(--lumo-font-size-xs);
+  }
+
+  :host([theme~='small']) [part='error-message'] {
+    font-size: var(--lumo-font-size-xxs);
+  }
+
+  /* Slotted content */
+  [part='input-field'] ::slotted(:not(vaadin-icon):not(input):not(textarea)) {
+    color: var(--lumo-secondary-text-color);
+    font-weight: 400;
+  }
+
+  [part='clear-button']::before {
+    content: var(--lumo-icons-cross);
+  }
+
+  @media (forced-colors: active) {
+    :host(:not([readonly])) [part='input-field'] {
+      outline: 1px solid;
+      outline-offset: -1px;
+    }
+
+    :host([focused]) [part='input-field'] {
+      outline-width: 2px;
+    }
+
+    :host([disabled]) [part='input-field'] {
+      outline-color: GrayText;
+    }
+  }
+}

package/src/mixins/field-button.css

@@ -0,0 +1,46 @@
+/**
+ * @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_mixins_field-button {
+  [part$='button'] {
+    flex: none;
+    width: 1em;
+    height: 1em;
+    line-height: 1;
+    font-size: var(--lumo-icon-size-m);
+    text-align: center;
+    color: var(--lumo-contrast-60pct);
+    transition: 0.2s color;
+    cursor: var(--lumo-clickable-cursor);
+  }
+
+  [part$='button']:hover {
+    color: var(--lumo-contrast-90pct);
+  }
+
+  :host([disabled]) [part$='button'],
+  :host([readonly]) [part$='button'] {
+    color: var(--lumo-contrast-20pct);
+    cursor: default;
+  }
+
+  [part$='button']::before {
+    font-family: 'lumo-icons';
+    display: block;
+  }
+
+  [part='clear-button'] {
+    display: none;
+    cursor: default;
+  }
+
+  [part='clear-button']::before {
+    content: '\2715';
+  }
+
+  :host([clear-button-visible][has-value]:not([disabled]):not([readonly])) [part='clear-button'] {
+    display: block;
+  }
+}

package/src/mixins/field-error-message.css

@@ -0,0 +1,36 @@
+/**
+ * @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_mixins_field-error-message {
+  [part='error-message'] {
+    margin-left: calc(var(--lumo-border-radius-m) / 4);
+    font-size: var(--vaadin-input-field-error-font-size, var(--lumo-font-size-xs));
+    line-height: var(--lumo-line-height-xs);
+    font-weight: var(--vaadin-input-field-error-font-weight, 400);
+    color: var(--vaadin-input-field-error-color, var(--lumo-error-text-color));
+    will-change: max-height;
+    transition: 0.4s max-height;
+    max-height: 5em;
+  }
+
+  :host([has-error-message]) [part='error-message']::before,
+  :host([has-error-message]) [part='error-message']::after {
+    content: '';
+    display: block;
+    height: 0.4em;
+  }
+
+  :host(:not([invalid])) [part='error-message'] {
+    max-height: 0;
+    overflow: hidden;
+  }
+
+  /* RTL specific styles */
+
+  :host([dir='rtl']) [part='error-message'] {
+    margin-left: 0;
+    margin-right: calc(var(--lumo-border-radius-m) / 4);
+  }
+}

package/src/mixins/field-helper.css

@@ -0,0 +1,62 @@
+/**
+ * @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_mixins_field-helper {
+  :host {
+    --_helper-spacing: var(--vaadin-input-field-helper-spacing, 0.4em);
+  }
+
+  :host([has-helper]) [part='helper-text']::before {
+    content: '';
+    display: block;
+    height: var(--_helper-spacing);
+  }
+
+  [part='helper-text'] {
+    display: block;
+    color: var(--vaadin-input-field-helper-color, var(--lumo-secondary-text-color));
+    font-size: var(--vaadin-input-field-helper-font-size, var(--lumo-font-size-xs));
+    line-height: var(--lumo-line-height-xs);
+    font-weight: var(--vaadin-input-field-helper-font-weight, 400);
+    margin-left: calc(var(--lumo-border-radius-m) / 4);
+    transition: color 0.2s;
+  }
+
+  :host(:hover:not([readonly])) [part='helper-text'] {
+    color: var(--lumo-body-text-color);
+  }
+
+  :host([disabled]) [part='helper-text'] {
+    color: var(--lumo-disabled-text-color);
+    -webkit-text-fill-color: var(--lumo-disabled-text-color);
+  }
+
+  :host([has-helper][theme~='helper-above-field']) [part='helper-text']::before {
+    display: none;
+  }
+
+  :host([has-helper][theme~='helper-above-field']) [part='helper-text']::after {
+    content: '';
+    display: block;
+    height: var(--_helper-spacing);
+  }
+
+  :host([has-helper][theme~='helper-above-field']) [part='label'] {
+    order: 0;
+    padding-bottom: var(--_helper-spacing);
+  }
+
+  :host([has-helper][theme~='helper-above-field']) [part='helper-text'] {
+    order: 1;
+  }
+
+  :host([has-helper][theme~='helper-above-field']) [part='label'] + * {
+    order: 2;
+  }
+
+  :host([has-helper][theme~='helper-above-field']) [part='error-message'] {
+    order: 3;
+  }
+}

package/src/mixins/field-label.css

@@ -0,0 +1,62 @@
+/**
+ * @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_mixins_field-label {
+  [part='label'] {
+    align-self: flex-start;
+    color: var(--vaadin-input-field-label-color, var(--lumo-secondary-text-color));
+    font-weight: var(--vaadin-input-field-label-font-weight, 500);
+    font-size: var(--vaadin-input-field-label-font-size, var(--lumo-font-size-s));
+    transition: color 0.2s;
+    line-height: 1;
+    padding-inline: calc(var(--lumo-border-radius-m) / 4) 1em;
+    padding-bottom: 0.5em;
+    /* As a workaround for diacritics being cut off, add a top padding and a
+  negative margin to compensate */
+    padding-top: 0.25em;
+    margin-top: -0.25em;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    position: relative;
+    max-width: 100%;
+    box-sizing: border-box;
+  }
+
+  :host([focused]:not([readonly])) [part='label'] {
+    color: var(--vaadin-input-field-focused-label-color, var(--lumo-primary-text-color));
+  }
+
+  :host(:hover:not([readonly]):not([focused])) [part='label'] {
+    color: var(--vaadin-input-field-hovered-label-color, var(--lumo-body-text-color));
+  }
+
+  /* Touch device adjustment */
+  @media (pointer: coarse) {
+    :host(:hover:not([readonly]):not([focused])) [part='label'] {
+      color: var(--vaadin-input-field-label-color, var(--lumo-secondary-text-color));
+    }
+  }
+
+  :host(:not([has-label])) [part='label'] {
+    display: none;
+  }
+
+  :host([has-label])::before {
+    margin-top: calc(var(--lumo-font-size-s) * 1.5);
+  }
+
+  :host([has-label][theme~='small'])::before {
+    margin-top: calc(var(--lumo-font-size-xs) * 1.5);
+  }
+
+  :host([has-label]) {
+    padding-top: var(--lumo-space-m);
+  }
+
+  :host([has-label]) ::slotted([slot='tooltip']) {
+    --vaadin-tooltip-offset-bottom: calc((var(--lumo-space-m) - var(--lumo-space-xs)) * -1);
+  }
+}

package/src/mixins/field-required.css

@@ -0,0 +1,26 @@
+/**
+ * @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_mixins_field-required {
+  :host([required]) [part='required-indicator']::after {
+    content: var(--lumo-required-field-indicator, '\2022');
+    color: var(--lumo-required-field-indicator-color, var(--lumo-primary-text-color));
+    position: absolute;
+    right: 0;
+    width: 1em;
+    text-align: center;
+  }
+
+  :host([invalid]) [part='required-indicator']::after {
+    color: var(--lumo-required-field-indicator-color, var(--lumo-error-text-color));
+  }
+
+  /* RTL specific styles */
+
+  :host([dir='rtl']) [part='required-indicator']::after {
+    right: auto;
+    left: 0;
+  }
+}

package/src/mixins/grid-pro-editor.css

@@ -0,0 +1,35 @@
+/**
+ * @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_mixins_grid-pro-editor {
+  :host([theme~='grid-pro-editor']) {
+    position: absolute;
+    inset: 0;
+    padding: 0;
+    will-change: transform;
+    font-size: inherit;
+    --lumo-text-field-size: 27px;
+    /* outline similar to what grid uses */
+    box-shadow: inset 0 0 0 var(--_focus-ring-width) var(--_focus-ring-color);
+  }
+
+  :host([theme~='grid-pro-editor']) [part='input-field'] {
+    padding: 0;
+    border-radius: 0;
+    flex-grow: 1;
+    font-weight: 400;
+    --vaadin-input-field-border-color: transparent;
+  }
+
+  /* reset outline inherited from text-field */
+  :host([theme~='grid-pro-editor'][focus-ring]) [part='input-field'] {
+    box-shadow: none;
+  }
+
+  :host([theme~='grid-pro-editor']) ::slotted(input) {
+    padding: 0 var(--lumo-space-m);
+    font-size: inherit;
+  }
+}

package/src/mixins/group-field.css

@@ -0,0 +1,58 @@
+/**
+ * @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_mixins_group-field {
+  :host {
+    display: inline-flex;
+    color: var(--lumo-body-text-color);
+    font-size: var(--lumo-font-size-m);
+    font-family: var(--lumo-font-family);
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    -webkit-tap-highlight-color: transparent;
+    padding: var(--lumo-space-xs) 0;
+  }
+
+  :host::before {
+    content: '\2003';
+    width: 0;
+    height: var(--lumo-size-s);
+    box-sizing: border-box;
+    display: inline-flex;
+    align-items: center;
+  }
+
+  :host([hidden]) {
+    display: none !important;
+  }
+
+  .vaadin-group-field-container {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+  }
+
+  [part='group-field'] {
+    display: flex;
+    flex-wrap: wrap;
+  }
+
+  :host(:not([has-label])) [part='label'] {
+    display: none;
+  }
+
+  :host([theme~='vertical']) [part='group-field'] {
+    flex-direction: column;
+  }
+
+  :host([disabled]) [part='label'] {
+    color: var(--lumo-disabled-text-color);
+    -webkit-text-fill-color: var(--lumo-disabled-text-color);
+  }
+
+  :host([focused]:not([readonly])) [part='label'] {
+    color: var(--lumo-primary-text-color);
+  }
+}

package/src/mixins/loader.css

@@ -0,0 +1,48 @@
+/**
+ * @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_mixins_loader {
+  [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);
+    }
+  }
+}

package/src/mixins/menu-overlay-core.css

@@ -0,0 +1,36 @@
+/**
+ * @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_mixins_menu-overlay-core {
+  :host([opening]),
+  :host([closing]) {
+    animation: 0.14s lumo-overlay-dummy-animation;
+  }
+
+  [part='overlay'] {
+    will-change: opacity, transform;
+  }
+
+  :host([opening]) [part='overlay'] {
+    animation: 0.1s lumo-menu-overlay-enter ease-out both;
+  }
+
+  @keyframes lumo-menu-overlay-enter {
+    0% {
+      opacity: 0;
+      transform: translateY(-4px);
+    }
+  }
+
+  :host([closing]) [part='overlay'] {
+    animation: 0.1s lumo-menu-overlay-exit both;
+  }
+
+  @keyframes lumo-menu-overlay-exit {
+    100% {
+      opacity: 0;
+    }
+  }
+}

package/src/mixins/menu-overlay-ext.css

@@ -0,0 +1,63 @@
+/**
+ * @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_mixins_menu-overlay-ext {
+  /* Small viewport (bottom sheet) styles */
+  /* Use direct media queries instead of the state attributes ([phone] and [fullscreen]) provided by the elements */
+  @media (max-width: 450px), (max-height: 450px) {
+    :host {
+      inset: 0 0 var(--vaadin-overlay-viewport-bottom, 0) 0 !important;
+      align-items: stretch !important;
+      justify-content: flex-end !important;
+    }
+
+    [part='overlay'] {
+      max-height: 50vh;
+      width: 100vw;
+      border-radius: 0;
+      box-shadow: var(--lumo-box-shadow-xl);
+    }
+
+    /* The content part scrolls instead of the overlay part, because of the gradient fade-out */
+    [part='content'] {
+      padding: 30px var(--lumo-space-m);
+      max-height: inherit;
+      box-sizing: border-box;
+      overflow: auto;
+      mask-image: linear-gradient(transparent, #000 40px, #000 calc(100% - 40px), transparent);
+    }
+
+    [part='backdrop'] {
+      display: block;
+    }
+
+    /* Animations */
+
+    :host([opening]) [part='overlay'] {
+      animation: 0.2s lumo-mobile-menu-overlay-enter cubic-bezier(0.215, 0.61, 0.355, 1) both;
+    }
+
+    :host([closing]),
+    :host([closing]) [part='backdrop'] {
+      animation-delay: 0.14s;
+    }
+
+    :host([closing]) [part='overlay'] {
+      animation: 0.14s 0.14s lumo-mobile-menu-overlay-exit cubic-bezier(0.55, 0.055, 0.675, 0.19) both;
+    }
+  }
+
+  @keyframes lumo-mobile-menu-overlay-enter {
+    0% {
+      transform: translateY(150%);
+    }
+  }
+
+  @keyframes lumo-mobile-menu-overlay-exit {
+    100% {
+      transform: translateY(150%);
+    }
+  }
+}