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

package/src/components/dialog-overlay.css

@@ -0,0 +1,163 @@
+/**
+ * @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_dialog-overlay {
+  [part='header'],
+  [part='header-content'],
+  [part='footer'] {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    flex: none;
+    pointer-events: none;
+    z-index: 1;
+    gap: var(--lumo-space-xs) var(--lumo-space-s);
+    line-height: var(--lumo-line-height-s);
+  }
+
+  [part='header'] {
+    flex-wrap: nowrap;
+    padding: var(--lumo-space-m);
+    background-color: var(--lumo-base-color);
+    border-radius: var(--lumo-border-radius-l) var(--lumo-border-radius-l) 0 0; /* Needed for Safari */
+  }
+
+  [part='footer'] {
+    padding: var(--lumo-space-s) var(--lumo-space-m);
+    background-color: var(--lumo-contrast-5pct);
+    border-radius: 0 0 var(--lumo-border-radius-l) var(--lumo-border-radius-l); /* Needed for Safari */
+  }
+
+  [part='title'] {
+    font-size: var(--lumo-font-size-xl);
+    font-weight: 600;
+    color: var(--lumo-header-text-color);
+    margin-inline-start: calc(var(--lumo-space-l) - var(--lumo-space-m));
+  }
+
+  ::slotted([slot='header-content']),
+  ::slotted([slot='title']),
+  ::slotted([slot='footer']) {
+    display: contents;
+    pointer-events: auto;
+  }
+
+  ::slotted([slot='title']) {
+    font: inherit !important;
+    overflow-wrap: anywhere;
+  }
+
+  [part='header-content'] {
+    flex: 1;
+  }
+
+  :host([has-title]) [part='header-content'],
+  [part='footer'] {
+    justify-content: flex-end;
+  }
+
+  :host(:not([has-title]):not([has-header])) [part='header'],
+  :host(:not([has-header])) [part='header-content'],
+  :host(:not([has-title])) [part='title'],
+  :host(:not([has-footer])) [part='footer'] {
+    display: none !important;
+  }
+
+  :host(:is([has-title], [has-header], [has-footer])) [part='content'] {
+    height: auto;
+  }
+
+  /*
+  NOTE(platosha): Make some min-width to prevent collapsing of the content
+  taking the parent width, e. g., <vaadin-grid> and such.
+*/
+  [part='content'] {
+    min-width: 12em; /* matches the default <vaadin-text-field> width */
+    padding: var(--lumo-space-l);
+    flex: 1;
+  }
+
+  :host([overflow]) [part='content'] {
+    overflow: auto;
+  }
+
+  :host([overflow~='top']) [part='header'] {
+    box-shadow: 0 1px 0 0 var(--lumo-contrast-10pct);
+  }
+
+  :host([has-bounds-set]) [part='overlay'] {
+    max-width: none;
+  }
+
+  /* Optical centering */
+  :host::before,
+  :host::after {
+    content: '';
+    flex-basis: 0;
+    flex-grow: 1;
+  }
+
+  :host::after {
+    flex-grow: 1.1;
+  }
+
+  [part='overlay'] {
+    border-radius: var(--lumo-border-radius-l);
+    box-shadow:
+      0 0 0 1px var(--lumo-shade-5pct),
+      var(--lumo-box-shadow-xl);
+    background-image: none;
+    outline: none;
+    -webkit-tap-highlight-color: transparent;
+  }
+
+  :host(:is([has-header], [has-title])) [part='header'] + [part='content'] {
+    padding-top: 0;
+  }
+
+  /* No padding */
+  :host([theme~='no-padding']) [part='content'] {
+    padding: 0 !important;
+  }
+
+  /* Animations */
+
+  :host([opening]),
+  :host([closing]) {
+    animation: 0.25s lumo-overlay-dummy-animation;
+  }
+
+  :host([opening]) [part='overlay'] {
+    animation: 0.12s 0.05s vaadin-dialog-enter cubic-bezier(0.215, 0.61, 0.355, 1) both;
+  }
+
+  @keyframes vaadin-dialog-enter {
+    0% {
+      opacity: 0;
+      transform: scale(0.95);
+    }
+  }
+
+  :host([closing]) [part='overlay'] {
+    animation: 0.1s 0.03s vaadin-dialog-exit cubic-bezier(0.55, 0.055, 0.675, 0.19) both;
+  }
+
+  :host([closing]) [part='backdrop'] {
+    animation-delay: 0.05s;
+  }
+
+  @keyframes vaadin-dialog-exit {
+    100% {
+      opacity: 0;
+      transform: scale(1.02);
+    }
+  }
+
+  @media (forced-colors: active) {
+    [part='overlay'] {
+      outline: 3px solid !important;
+    }
+  }
+}

package/src/components/drawer-toggle.css

@@ -0,0 +1,51 @@
+/**
+ * @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_drawer-toggle {
+  :host {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    cursor: default;
+    position: relative;
+    outline: none;
+    width: var(--lumo-size-l);
+    height: var(--lumo-size-l);
+    min-width: auto;
+    margin: 0 var(--lumo-space-s);
+    padding: 0;
+    background: transparent;
+  }
+
+  [part='icon'],
+  [part='icon']::after,
+  [part='icon']::before {
+    position: inherit;
+    height: auto;
+    width: auto;
+    background: transparent;
+    top: auto;
+  }
+
+  [part='icon']::after,
+  [part='icon']::before {
+    content: '';
+  }
+
+  [part='icon']::after {
+    top: 6px;
+  }
+
+  [part='icon']::before {
+    top: 12px;
+    font-family: lumo-icons;
+    font-size: var(--lumo-icon-size-m);
+    content: var(--lumo-icons-menu);
+  }
+
+  :host([slot~='navbar']) {
+    color: var(--lumo-secondary-text-color);
+  }
+}

package/src/components/email-field.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_components_email-field {
+  /* See https://github.com/vaadin/vaadin-text-field/issues/466 */
+
+  :host([dir='rtl']) [part='input-field'] {
+    direction: ltr;
+  }
+
+  :host([dir='rtl']) [part='input-field'] ::slotted(input) {
+    --_lumo-text-field-overflow-mask-image: linear-gradient(to left, transparent, #000 1.25em);
+  }
+
+  :host([dir='rtl']) [part='input-field'] ::slotted(input)::placeholder {
+    direction: rtl;
+    text-align: left;
+  }
+
+  :host([dir='rtl']) [part='input-field'] ::slotted(input:placeholder-shown) {
+    --_lumo-text-field-overflow-mask-image: none;
+  }
+}

package/src/components/field-outline.css

@@ -0,0 +1,51 @@
+/**
+ * @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_field-outline {
+  :host {
+    display: block;
+    box-sizing: border-box;
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+    user-select: none;
+    opacity: 0;
+    --_active-user-color: transparent;
+    transition: opacity 0.3s;
+    mask-image: none !important;
+  }
+
+  :host([has-active-user]) {
+    opacity: 1;
+  }
+
+  :host::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    box-shadow: 0 0 0 2px var(--_active-user-color);
+    border-radius: var(--lumo-border-radius-s);
+    transition: box-shadow 0.3s;
+  }
+
+  :host([context$='checkbox'])::before {
+    box-shadow:
+      0 0 0 2px var(--lumo-base-color),
+      0 0 0 4px var(--_active-user-color);
+  }
+
+  :host([context$='radio-button'])::before {
+    border-radius: 50%;
+    box-shadow:
+      0 0 0 3px var(--lumo-base-color),
+      0 0 0 5px var(--_active-user-color);
+  }
+
+  :host([context$='item'])::before {
+    box-shadow: inset 0 0 0 2px var(--_active-user-color);
+  }
+}

package/src/components/form-item.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_components_form-item {
+  [part='label'] {
+    /* font-weight, margin-bottom, transition and line-height same as for part label in text-field */
+    color: var(--lumo-secondary-text-color);
+    font-family: var(--lumo-font-family);
+    font-size: var(--lumo-font-size-s);
+    font-weight: 500;
+    margin-top: var(--lumo-space-m);
+    margin-left: calc(var(--lumo-border-radius-m) / 4);
+    margin-bottom: var(--lumo-space-xs);
+    line-height: 1.333;
+  }
+
+  [part='required-indicator']::after {
+    content: var(--lumo-required-field-indicator, '\2022');
+    transition: opacity 0.2s;
+    opacity: 0;
+    color: var(--lumo-required-field-indicator-color, var(--lumo-primary-text-color));
+    position: relative;
+    width: 1em;
+    text-align: center;
+  }
+
+  :host([required]) [part='required-indicator']::after {
+    opacity: 1;
+  }
+
+  :host([invalid]) [part='required-indicator']::after {
+    color: var(--lumo-required-field-indicator-color, var(--lumo-error-text-color));
+  }
+}

package/src/components/form-layout.css

@@ -0,0 +1,12 @@
+/**
+ * @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_form-layout {
+  :host {
+    --vaadin-form-layout-column-spacing: var(--lumo-space-l);
+    --vaadin-form-layout-row-spacing: 0;
+    --vaadin-form-layout-label-spacing: 1em;
+  }
+}

package/src/components/grid-filter.css

@@ -0,0 +1,16 @@
+/**
+ * @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_grid-filter {
+  :host {
+    display: inline-flex;
+    max-width: 100%;
+  }
+
+  ::slotted(*) {
+    width: 100%;
+    box-sizing: border-box;
+  }
+}

package/src/components/grid-pro-edit-select.css

@@ -0,0 +1,19 @@
+/**
+ * @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_grid-pro-edit-select {
+  :host([theme~='grid-pro-editor']) [part='toggle-button'] {
+    margin-right: var(--lumo-space-xs);
+  }
+
+  :host([theme~='grid-pro-editor']) [part='input-field'] ::slotted([slot='value']) {
+    box-sizing: border-box;
+    padding: 0 var(--lumo-space-m);
+    font-size: var(--lumo-font-size-m);
+    /* prevent selection on editor focus */
+    -webkit-user-select: none;
+    user-select: none;
+  }
+}

package/src/components/grid-pro.css

@@ -0,0 +1,84 @@
+/**
+ * @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_grid-pro {
+  :host([navigating]) [part~='cell']:active::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    box-shadow: inset 0 0 0 var(--_focus-ring-width) var(--_focus-ring-color);
+  }
+
+  [part~='editable-cell'],
+  [part~='editable-cell'] ::slotted(vaadin-grid-cell-content) {
+    cursor: var(--lumo-clickable-cursor);
+  }
+
+  [part~='editable-cell']:hover,
+  [part~='editable-cell']:focus {
+    background: var(--lumo-base-color) linear-gradient(var(--lumo-contrast-5pct), var(--lumo-contrast-5pct));
+  }
+
+  /* Indicate editable cells */
+
+  :host([theme~='highlight-editable-cells']) [part~='editable-cell'] {
+    background: var(--lumo-base-color) linear-gradient(var(--lumo-contrast-5pct), var(--lumo-contrast-5pct));
+  }
+
+  :host([theme~='highlight-editable-cells']) [part~='editable-cell']:hover,
+  :host([theme~='highlight-editable-cells']) [part~='editable-cell']:focus {
+    background: var(--lumo-base-color) linear-gradient(var(--lumo-contrast-10pct), var(--lumo-contrast-10pct));
+  }
+
+  /* Indicate read-only cells */
+
+  /* prettier-ignore */
+  :host([theme~='highlight-read-only-cells']) [tabindex]:not([part~='editable-cell']):not([part~='header-cell']):not([part~='footer-cell']) {
+      background-image: repeating-linear-gradient(
+        135deg,
+        transparent,
+        transparent 6px,
+        var(--lumo-contrast-5pct) 6px,
+        var(--lumo-contrast-5pct) 14px
+      );
+    }
+
+  /* Loading editor cell styles are used by Flow GridPro */
+  :host([loading-editor]) [part~='focused-cell']::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    box-shadow: inset 0 0 0 var(--_focus-ring-width) var(--_focus-ring-color);
+    animation: vaadin-grid-pro-loading-editor 1.4s infinite;
+    opacity: 0;
+  }
+
+  @keyframes vaadin-grid-pro-loading-editor {
+    50% {
+      opacity: 1;
+    }
+  }
+
+  [part~='updating-cell']::after {
+    content: '';
+    position: absolute;
+    inset: var(--_cell-padding);
+    margin: var(--_focus-ring-width);
+    border-radius: 4px;
+    background-size: max(4em, 50%);
+    background-repeat: no-repeat;
+    background-position: min(-200%, -4em) 0;
+    background-image: linear-gradient(90deg, transparent, var(--lumo-contrast-10pct), transparent);
+    animation: vaadin-grid-pro-updating-cell 1.3s ease-out infinite;
+  }
+
+  @keyframes vaadin-grid-pro-updating-cell {
+    100% {
+      background-position: max(300%, 8em) 0;
+    }
+  }
+}

package/src/components/grid-sorter.css

@@ -0,0 +1,70 @@
+/**
+ * @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_grid-sorter {
+  :host {
+    display: inline-flex;
+    max-width: 100%;
+    justify-content: flex-start;
+    align-items: baseline;
+    -webkit-user-select: none;
+    user-select: none;
+    cursor: var(--lumo-clickable-cursor);
+  }
+
+  [part='content'] {
+    flex: 1 1 auto;
+    display: inline-block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  [part='indicators'] {
+    position: relative;
+    align-self: center;
+    flex: none;
+    margin-left: var(--lumo-space-s);
+  }
+
+  [part='order'] {
+    display: inline;
+    vertical-align: super;
+    font-size: var(--lumo-font-size-xxs);
+    line-height: 1;
+  }
+
+  [part='indicators']::before {
+    font-family: 'vaadin-grid-sorter-icons';
+    display: inline-block;
+    transform: scale(0.8);
+  }
+
+  :host(:not([direction])) [part='indicators']::before {
+    content: '\e901';
+  }
+
+  :host([direction='asc']) [part='indicators']::before {
+    content: '\e900';
+  }
+
+  :host([direction='desc']) [part='indicators']::before {
+    content: '\e902';
+  }
+
+  :host(:not([direction]):not(:hover)) [part='indicators'] {
+    color: var(--lumo-tertiary-text-color);
+  }
+
+  :host([direction]) {
+    color: var(--vaadin-selection-color-text, var(--lumo-primary-text-color));
+  }
+
+  /* RTL specific styles */
+
+  :host([dir='rtl']) [part='indicators'] {
+    margin-right: var(--lumo-space-s);
+    margin-left: 0;
+  }
+}

package/src/components/grid-tree-toggle.css

@@ -0,0 +1,104 @@
+/**
+ * @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_grid-tree-toggle {
+  :host {
+    --vaadin-grid-tree-toggle-level-offset: 2em;
+    display: inline-flex;
+    max-width: 100%;
+    align-items: center;
+    vertical-align: middle;
+    transform: translateX(calc(var(--lumo-space-s) * -1));
+    -webkit-tap-highlight-color: transparent;
+  }
+
+  :host([hidden]) {
+    display: none !important;
+  }
+
+  :host(:not([leaf])) {
+    cursor: default;
+  }
+
+  #level-spacer,
+  [part='toggle'] {
+    flex: none;
+  }
+
+  #level-spacer {
+    display: inline-block;
+    width: calc(var(--_level, '0') * var(--vaadin-grid-tree-toggle-level-offset));
+  }
+
+  [part='toggle']::before {
+    line-height: 1em; /* make icon font metrics not affect baseline */
+    font-family: 'lumo-icons';
+    display: inline-block;
+    height: 100%;
+  }
+
+  :host(:not([expanded])) [part='toggle']::before {
+    content: var(--lumo-icons-angle-right);
+  }
+
+  :host([expanded]) [part='toggle']::before {
+    content: var(--lumo-icons-angle-right);
+    transform: rotate(90deg);
+  }
+
+  :host([leaf]) [part='toggle'] {
+    visibility: hidden;
+  }
+
+  slot {
+    display: block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  [part='toggle'] {
+    display: inline-block;
+    font-size: 1.5em;
+    line-height: 1;
+    width: 1em;
+    height: 1em;
+    text-align: center;
+    color: var(--lumo-contrast-50pct);
+    cursor: var(--lumo-clickable-cursor);
+    /* Increase touch target area */
+    padding: calc(1em / 3);
+    margin: calc(1em / -3);
+  }
+
+  :host(:not([dir='rtl'])) [part='toggle'] {
+    margin-right: 0;
+  }
+
+  @media (hover: hover) {
+    :host(:hover) [part='toggle'] {
+      color: var(--lumo-contrast-80pct);
+    }
+  }
+
+  /* RTL specific styles */
+
+  :host([dir='rtl']) {
+    margin-left: 0;
+    margin-right: calc(var(--lumo-space-s) * -1);
+  }
+
+  :host([dir='rtl']) [part='toggle'] {
+    margin-left: 0;
+  }
+
+  :host([dir='rtl'][expanded]) [part='toggle']::before {
+    transform: rotate(-90deg);
+  }
+
+  :host([dir='rtl']:not([expanded])) [part='toggle']::before,
+  :host([dir='rtl'][expanded]) [part='toggle']::before {
+    content: var(--lumo-icons-angle-left);
+  }
+}