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

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

@@ -0,0 +1,102 @@
+/**
+ * @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 {
+  :host {
+    max-width: 100%;
+    --input-min-width: var(--vaadin-multi-select-combo-box-input-min-width, 4em);
+    --_chip-min-width: var(--vaadin-multi-select-combo-box-chip-min-width, 50px);
+    --_wrapper-gap: 0;
+  }
+
+  :host([opened]) {
+    pointer-events: auto;
+  }
+
+  #chips {
+    display: flex;
+    align-items: center;
+  }
+
+  ::slotted(input) {
+    box-sizing: border-box;
+    flex: 1 0 var(--input-min-width);
+  }
+
+  ::slotted([slot='chip']),
+  ::slotted([slot='overflow']) {
+    flex: 0 1 auto;
+  }
+
+  ::slotted([slot='chip']) {
+    overflow: hidden;
+  }
+
+  :host(:is([readonly], [disabled])) ::slotted(input) {
+    flex-grow: 0;
+    flex-basis: 0;
+    padding: 0;
+  }
+
+  :host([auto-expand-vertically]) #chips {
+    display: contents;
+  }
+
+  :host([auto-expand-horizontally]) [class$='container'] {
+    width: auto;
+  }
+
+  :host([has-value]) {
+    padding-inline-start: 0;
+  }
+
+  :host([has-value]) ::slotted(input:placeholder-shown) {
+    caret-color: var(--lumo-body-text-color) !important;
+  }
+
+  [part='label'] {
+    flex-shrink: 0;
+  }
+
+  /* Override input-container styles */
+  [part='input-field'] ::slotted([slot='chip']),
+  [part='input-field'] ::slotted([slot='overflow']) {
+    min-height: auto;
+    padding: 0.3125em calc(0.5em + var(--lumo-border-radius-s) / 4);
+    color: var(--lumo-body-text-color);
+    mask-image: none;
+  }
+
+  :host([auto-expand-vertically]) ::slotted([slot='chip']) {
+    margin-block: calc(var(--lumo-space-xs) / 2);
+  }
+
+  ::slotted([slot='chip']:not([readonly]):not([disabled])) {
+    padding-inline-end: 0;
+  }
+
+  :host([auto-expand-vertically]) ::slotted([slot='input']) {
+    min-height: calc(var(--lumo-text-field-size, var(--lumo-size-m)) - 2 * var(--lumo-space-xs));
+  }
+
+  ::slotted([slot='chip']:not(:last-of-type)),
+  ::slotted([slot='overflow']:not(:last-of-type)) {
+    margin-inline-end: var(--lumo-space-xs);
+  }
+
+  ::slotted([slot='chip'][focused]) {
+    background-color: var(--vaadin-selection-color, var(--lumo-primary-color));
+    color: var(--lumo-primary-contrast-color);
+  }
+
+  [part='toggle-button']::before {
+    content: var(--lumo-icons-dropdown);
+  }
+
+  :host([readonly][has-value]) [part='toggle-button'] {
+    color: var(--lumo-contrast-60pct);
+    cursor: var(--lumo-clickable-cursor);
+  }
+}

package/src/components/notification-card.css

@@ -0,0 +1,228 @@
+/**
+ * @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_notification-card {
+  :host {
+    display: block;
+    position: relative;
+    margin: var(--lumo-space-s);
+  }
+
+  [part='overlay'] {
+    pointer-events: auto;
+    background: var(--lumo-base-color) linear-gradient(var(--lumo-contrast-5pct), var(--lumo-contrast-5pct));
+    border-radius: var(--lumo-border-radius-l);
+    box-shadow:
+      0 0 0 1px var(--lumo-contrast-10pct),
+      var(--lumo-box-shadow-l);
+    font-family: var(--lumo-font-family);
+    font-size: var(--lumo-font-size-m);
+    font-weight: 400;
+    line-height: var(--lumo-line-height-s);
+    letter-spacing: 0;
+    text-transform: none;
+    -webkit-text-size-adjust: 100%;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+
+  [part='content'] {
+    padding: var(--lumo-space-wide-l);
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  [part='content'] ::slotted(vaadin-button) {
+    flex: none;
+    margin: 0 calc(var(--lumo-space-s) * -1) 0 var(--lumo-space-m);
+  }
+
+  :host([slot^='middle']) {
+    max-width: 80vw;
+    margin: var(--lumo-space-s) auto;
+  }
+
+  :host([slot$='stretch']) {
+    margin: 0;
+  }
+
+  :host([slot$='stretch']) [part='overlay'] {
+    border-radius: 0;
+  }
+
+  @media (min-width: 421px) {
+    :host(:not([slot$='stretch'])) {
+      display: flex;
+    }
+
+    :host([slot$='end']) {
+      justify-content: flex-end;
+    }
+
+    :host([slot^='middle']),
+    :host([slot$='center']) {
+      display: flex;
+      justify-content: center;
+    }
+  }
+
+  @keyframes lumo-notification-exit-fade-out {
+    100% {
+      opacity: 0;
+    }
+  }
+
+  @keyframes lumo-notification-enter-fade-in {
+    0% {
+      opacity: 0;
+    }
+  }
+
+  @keyframes lumo-notification-enter-slide-down {
+    0% {
+      transform: translateY(-200%);
+      opacity: 0;
+    }
+  }
+
+  @keyframes lumo-notification-exit-slide-up {
+    100% {
+      transform: translateY(-200%);
+      opacity: 0;
+    }
+  }
+
+  @keyframes lumo-notification-enter-slide-up {
+    0% {
+      transform: translateY(200%);
+      opacity: 0;
+    }
+  }
+
+  @keyframes lumo-notification-exit-slide-down {
+    100% {
+      transform: translateY(200%);
+      opacity: 0;
+    }
+  }
+
+  :host([slot='middle'][opening]) {
+    animation: lumo-notification-enter-fade-in 300ms;
+  }
+
+  :host([slot='middle'][closing]) {
+    animation: lumo-notification-exit-fade-out 300ms;
+  }
+
+  :host([slot^='top'][opening]) {
+    animation: lumo-notification-enter-slide-down 300ms;
+  }
+
+  :host([slot^='top'][closing]) {
+    animation: lumo-notification-exit-slide-up 300ms;
+  }
+
+  :host([slot^='bottom'][opening]) {
+    animation: lumo-notification-enter-slide-up 300ms;
+  }
+
+  :host([slot^='bottom'][closing]) {
+    animation: lumo-notification-exit-slide-down 300ms;
+  }
+
+  :host([theme='success']) {
+    --_focus-ring-gap-color: var(--lumo-success-color);
+    --vaadin-focus-ring-color: var(--lumo-success-contrast-color);
+  }
+
+  :host([theme='warning']) {
+    --_focus-ring-gap-color: var(--lumo-warning-color);
+    --vaadin-focus-ring-color: var(--lumo-warning-contrast-color);
+  }
+
+  :host([theme='error']) {
+    --_focus-ring-gap-color: var(--lumo-error-color);
+    --vaadin-focus-ring-color: var(--lumo-error-contrast-color);
+  }
+
+  :host([theme='primary']) {
+    --_focus-ring-gap-color: var(--lumo-primary-color);
+    --vaadin-focus-ring-color: var(--lumo-primary-contrast-color);
+  }
+
+  :host([theme~='primary']) [part='overlay'] {
+    background: var(--lumo-primary-color);
+    color: var(--lumo-primary-contrast-color);
+    box-shadow: var(--lumo-box-shadow-l);
+  }
+
+  :host([theme~='primary']) {
+    --vaadin-button-background: var(--lumo-shade-20pct);
+    --vaadin-button-text-color: var(--lumo-primary-contrast-color);
+    --vaadin-button-primary-background: var(--lumo-primary-contrast-color);
+    --vaadin-button-primary-text-color: var(--lumo-primary-text-color);
+  }
+
+  :host([theme~='contrast']) [part='overlay'] {
+    background: var(--lumo-contrast);
+    color: var(--lumo-base-color);
+    box-shadow: var(--lumo-box-shadow-l);
+  }
+
+  :host([theme~='contrast']) {
+    --vaadin-button-background: var(--lumo-contrast-20pct);
+    --vaadin-button-text-color: var(--lumo-base-color);
+    --vaadin-button-primary-background: var(--lumo-base-color);
+    --vaadin-button-primary-text-color: var(--lumo-contrast);
+  }
+
+  :host([theme~='success']) [part='overlay'] {
+    background: var(--lumo-success-color);
+    color: var(--lumo-success-contrast-color);
+    box-shadow: var(--lumo-box-shadow-l);
+  }
+
+  :host([theme~='success']) {
+    --vaadin-button-background: var(--lumo-shade-20pct);
+    --vaadin-button-text-color: var(--lumo-success-contrast-color);
+    --vaadin-button-primary-background: var(--lumo-success-contrast-color);
+    --vaadin-button-primary-text-color: var(--lumo-success-text-color);
+  }
+
+  :host([theme~='error']) [part='overlay'] {
+    background: var(--lumo-error-color);
+    color: var(--lumo-error-contrast-color);
+    box-shadow: var(--lumo-box-shadow-l);
+  }
+
+  :host([theme~='error']) {
+    --vaadin-button-background: var(--lumo-shade-20pct);
+    --vaadin-button-text-color: var(--lumo-error-contrast-color);
+    --vaadin-button-primary-background: var(--lumo-error-contrast-color);
+    --vaadin-button-primary-text-color: var(--lumo-error-text-color);
+  }
+
+  :host([theme~='warning']) [part='overlay'] {
+    background: var(--lumo-warning-color);
+    color: var(--lumo-warning-contrast-color);
+    box-shadow:
+      inset 0 0 0 1px var(--lumo-contrast-20pct),
+      var(--lumo-box-shadow-l);
+  }
+
+  :host([theme~='warning']) {
+    --vaadin-button-background: var(--lumo-shade-20pct);
+    --vaadin-button-text-color: var(--lumo-warning-contrast-color);
+    --vaadin-button-primary-background: var(--lumo-shade-50pct);
+    --vaadin-button-primary-text-color: var(--lumo-primary-contrast-color);
+  }
+
+  @media (forced-colors: active) {
+    [part='overlay'] {
+      outline: 3px solid;
+    }
+  }
+}

package/src/components/notification-container.css

@@ -0,0 +1,60 @@
+/**
+ * @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_notification-container {
+  :host {
+    position: fixed;
+    inset: 0;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    pointer-events: none;
+
+    /* Override native [popover] user agent styles */
+    width: auto;
+    height: auto;
+    border: none;
+    padding: 0;
+    background-color: transparent;
+    overflow: visible;
+  }
+
+  [region-group] {
+    flex: 1 1 0%;
+    display: flex;
+  }
+
+  [region-group='top'] {
+    align-items: flex-start;
+  }
+
+  [region-group='bottom'] {
+    align-items: flex-end;
+  }
+
+  [region-group] > [region] {
+    flex: 1 1 0%;
+  }
+
+  @media (max-width: 420px) {
+    [region-group] {
+      flex-direction: column;
+      align-items: stretch;
+    }
+
+    [region-group='top'] {
+      justify-content: flex-start;
+    }
+
+    [region-group='bottom'] {
+      justify-content: flex-end;
+    }
+
+    [region-group] > [region] {
+      flex: initial;
+    }
+  }
+}

package/src/components/number-field.css

@@ -0,0 +1,53 @@
+/**
+ * @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_number-field {
+  :host([readonly]) [part$='button'] {
+    pointer-events: none;
+  }
+
+  :host([step-buttons-visible]:not([theme~='align-right'])) ::slotted(input) {
+    text-align: center;
+  }
+
+  :host(:not([disabled])) [part$='button'][disabled] {
+    opacity: 0.2;
+  }
+
+  :host([step-buttons-visible]) [part='input-field'] {
+    padding: 0;
+  }
+
+  [part='decrease-button'],
+  [part='increase-button'] {
+    cursor: pointer;
+    width: 1.5em;
+    height: 1.5em;
+    -webkit-user-select: none;
+    user-select: none;
+  }
+
+  [part='decrease-button']::before,
+  [part='increase-button']::before {
+    margin-top: 0.25em;
+  }
+
+  [part='decrease-button']::before {
+    content: var(--lumo-icons-minus);
+  }
+
+  [part='increase-button']::before {
+    content: var(--lumo-icons-plus);
+  }
+
+  /* RTL specific styles */
+  :host([dir='rtl']) [part='input-field'] {
+    direction: ltr;
+  }
+
+  :host([dir='rtl']:not([theme~='align-right'])) ::slotted(input) {
+    --_lumo-text-field-overflow-mask-image: linear-gradient(to left, transparent, #000 1.25em);
+  }
+}

package/src/components/password-field-button.css

@@ -0,0 +1,19 @@
+/**
+ * @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_password-field-button {
+  :host {
+    position: absolute;
+    right: 0;
+    top: 0;
+    margin: 0;
+    padding: 0;
+    width: 100%;
+    height: 100%;
+    min-width: auto;
+    background: transparent;
+    outline: none;
+  }
+}

package/src/components/password-field.css

@@ -0,0 +1,24 @@
+/**
+ * @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_password-field {
+  [part='reveal-button']::before {
+    content: var(--lumo-icons-eye);
+  }
+
+  :host([password-visible]) [part='reveal-button']::before {
+    content: var(--lumo-icons-eye-disabled);
+  }
+
+  /* Make it easy to hide the button across the whole app */
+  [part='reveal-button'] {
+    position: relative;
+    display: var(--lumo-password-field-reveal-button-display, block);
+  }
+
+  [part='reveal-button'][hidden] {
+    display: none !important;
+  }
+}

package/src/components/popover-overlay.css

@@ -0,0 +1,156 @@
+/**
+ * @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_popover-overlay {
+  :host {
+    --vaadin-popover-arrow-size: 0.5rem;
+    --_default-offset: var(--lumo-space-xs);
+  }
+
+  [part='overlay'] {
+    position: relative;
+    overflow: visible;
+    max-height: 100%;
+    outline: none;
+  }
+
+  [part='content'] {
+    overflow: auto;
+    box-sizing: border-box;
+    max-height: 100%;
+    padding: var(--lumo-space-xs) var(--lumo-space-s);
+  }
+
+  /* Increase the area of the popover so the pointer can go from the target directly to it. */
+  [part='overlay']::before {
+    position: absolute;
+    content: '';
+    inset-block: calc(var(--vaadin-popover-offset-top, var(--_default-offset)) * -1)
+      calc(var(--vaadin-popover-offset-bottom, var(--_default-offset)) * -1);
+    inset-inline: calc(var(--vaadin-popover-offset-start, var(--_default-offset)) * -1)
+      calc(var(--vaadin-popover-offset-end, var(--_default-offset)) * -1);
+    z-index: -1;
+    pointer-events: auto;
+  }
+
+  :host([theme~='no-padding']) [part='content'] {
+    padding: 0 !important;
+  }
+
+  [part='arrow'] {
+    display: none;
+    position: absolute;
+    height: 0;
+    width: 0;
+  }
+
+  :host([theme~='arrow']) {
+    --_default-offset: calc(var(--lumo-space-s) + var(--vaadin-popover-arrow-size) / 2);
+  }
+
+  :host([theme~='arrow']) [part='arrow'] {
+    display: block;
+  }
+
+  :host([modeless][with-backdrop]) [part='backdrop'] {
+    pointer-events: none;
+  }
+
+  :host([position^='top'][top-aligned]) [part='overlay'],
+  :host([position^='bottom'][top-aligned]) [part='overlay'] {
+    margin-top: var(--vaadin-popover-offset-top, var(--_default-offset));
+  }
+
+  :host([position^='top'][bottom-aligned]) [part='overlay'],
+  :host([position^='bottom'][bottom-aligned]) [part='overlay'] {
+    margin-bottom: var(--vaadin-popover-offset-bottom, var(--_default-offset));
+  }
+
+  :host([position^='start'][start-aligned]) [part='overlay'],
+  :host([position^='end'][start-aligned]) [part='overlay'] {
+    margin-inline-start: var(--vaadin-popover-offset-start, var(--_default-offset));
+  }
+
+  :host([position^='start'][end-aligned]) [part='overlay'],
+  :host([position^='end'][end-aligned]) [part='overlay'] {
+    margin-inline-end: var(--vaadin-popover-offset-end, var(--_default-offset));
+  }
+
+  /* top / bottom position */
+  :host([theme~='arrow'][position^='top']) [part='arrow'],
+  :host([theme~='arrow'][position^='bottom']) [part='arrow'] {
+    border-left: var(--vaadin-popover-arrow-size) solid transparent;
+    border-right: var(--vaadin-popover-arrow-size) solid transparent;
+  }
+
+  :host([theme~='arrow'][position^='bottom'][bottom-aligned]) [part='arrow'],
+  :host([theme~='arrow'][position^='top'][bottom-aligned]) [part='arrow'] {
+    bottom: calc(var(--vaadin-popover-arrow-size) * -1);
+    border-top: var(--vaadin-popover-arrow-size) solid var(--lumo-base-color);
+    filter: drop-shadow(0 2px 1px var(--lumo-shade-10pct));
+  }
+
+  :host([theme~='arrow'][position^='bottom'][top-aligned]) [part='arrow'],
+  :host([theme~='arrow'][position^='top'][top-aligned]) [part='arrow'] {
+    top: calc(var(--vaadin-popover-arrow-size) * -1);
+    border-bottom: var(--vaadin-popover-arrow-size) solid var(--lumo-base-color);
+    filter: drop-shadow(0 -2px 1px var(--lumo-shade-10pct));
+  }
+
+  :host([theme~='arrow'][position^='bottom'][start-aligned]) [part='arrow'],
+  :host([theme~='arrow'][position^='top'][start-aligned]) [part='arrow'] {
+    transform: translateX(-50%);
+    inset-inline-start: 1.5rem;
+  }
+
+  :host([theme~='arrow'][position^='bottom'][end-aligned]) [part='arrow'],
+  :host([theme~='arrow'][position^='top'][end-aligned]) [part='arrow'] {
+    transform: translateX(50%);
+    inset-inline-end: 1.5rem;
+  }
+
+  :host([theme~='arrow'][position^='bottom'][arrow-centered]) [part='arrow'],
+  :host([theme~='arrow'][position^='top'][arrow-centered]) [part='arrow'] {
+    transform: translateX(-50%);
+    inset-inline-start: 50%;
+  }
+
+  /* start / end position */
+  :host([theme~='arrow'][position^='start']) [part='arrow'],
+  :host([theme~='arrow'][position^='end']) [part='arrow'] {
+    border-top: var(--vaadin-popover-arrow-size) solid transparent;
+    border-bottom: var(--vaadin-popover-arrow-size) solid transparent;
+  }
+
+  :host([theme~='arrow'][position^='start'][start-aligned]) [part='arrow'],
+  :host([theme~='arrow'][position^='end'][start-aligned]) [part='arrow'] {
+    inset-inline-start: calc(var(--vaadin-popover-arrow-size) * -1);
+    border-right: var(--vaadin-popover-arrow-size) solid var(--lumo-base-color);
+    filter: drop-shadow(-2px 0 1px var(--lumo-shade-10pct));
+  }
+
+  :host([theme~='arrow'][position^='start'][end-aligned]) [part='arrow'],
+  :host([theme~='arrow'][position^='end'][end-aligned]) [part='arrow'] {
+    inset-inline-end: calc(var(--vaadin-popover-arrow-size) * -1);
+    border-left: var(--vaadin-popover-arrow-size) solid var(--lumo-base-color);
+    filter: drop-shadow(2px 0 1px var(--lumo-shade-10pct));
+  }
+
+  :host([theme~='arrow'][position^='start'][top-aligned]) [part='arrow'],
+  :host([theme~='arrow'][position^='end'][top-aligned]) [part='arrow'] {
+    top: 0.5rem;
+  }
+
+  :host([theme~='arrow'][position='start'][top-aligned]) [part='arrow'],
+  :host([theme~='arrow'][position='end'][top-aligned]) [part='arrow'] {
+    top: 50%;
+    transform: translateY(-50%);
+  }
+
+  :host([theme~='arrow'][position^='start'][bottom-aligned]) [part='arrow'],
+  :host([theme~='arrow'][position^='end'][bottom-aligned]) [part='arrow'] {
+    bottom: 0.5rem;
+  }
+}