@vaadin/vaadin-lumo-styles 25.0.0-alpha6 → 25.0.0-alpha8

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;
+  }
+
+  [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;
+  }
+}

package/src/components/progress-bar.css

@@ -0,0 +1,295 @@
+/**
+ * @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_progress-bar {
+  :host {
+    display: block;
+    width: 100%; /* prevent collapsing inside non-stretching column flex */
+    height: calc(var(--lumo-size-l) / 10);
+    margin: var(--lumo-space-s) 0;
+  }
+
+  :host([hidden]) {
+    display: none !important;
+  }
+
+  [part='bar'] {
+    height: 100%;
+    border-radius: var(--lumo-border-radius-m);
+    background-color: var(--lumo-contrast-10pct);
+  }
+
+  [part='value'] {
+    height: 100%;
+    transform-origin: 0 50%;
+    border-radius: var(--lumo-border-radius-m);
+    background-color: var(--lumo-primary-color);
+    /* Use width instead of transform to preserve border radius */
+    transform: none;
+    width: calc(var(--vaadin-progress-value) * 100%);
+    will-change: width;
+    transition: 0.1s width linear;
+  }
+
+  :host([dir='rtl']) [part='value'] {
+    transform-origin: 100% 50%;
+  }
+
+  @media (forced-colors: active) {
+    [part='bar'] {
+      outline: 1px solid;
+    }
+
+    [part='value'] {
+      background-color: AccentColor !important;
+      forced-color-adjust: none;
+    }
+  }
+
+  /* Indeterminate mode */
+  :host([indeterminate]) [part='value'] {
+    --lumo-progress-indeterminate-progress-bar-background: linear-gradient(
+      to right,
+      var(--lumo-primary-color-10pct) 10%,
+      var(--lumo-primary-color)
+    );
+    --lumo-progress-indeterminate-progress-bar-background-reverse: linear-gradient(
+      to left,
+      var(--lumo-primary-color-10pct) 10%,
+      var(--lumo-primary-color)
+    );
+    width: 100%;
+    background-color: transparent !important;
+    background-image: var(--lumo-progress-indeterminate-progress-bar-background);
+    opacity: 0.75;
+    will-change: transform;
+    animation: vaadin-progress-indeterminate 1.6s infinite cubic-bezier(0.645, 0.045, 0.355, 1);
+  }
+
+  @keyframes vaadin-progress-indeterminate {
+    0% {
+      transform: scaleX(0.015);
+      transform-origin: 0% 0%;
+    }
+
+    25% {
+      transform: scaleX(0.4);
+    }
+
+    50% {
+      transform: scaleX(0.015);
+      transform-origin: 100% 0%;
+      background-image: var(--lumo-progress-indeterminate-progress-bar-background);
+    }
+
+    50.1% {
+      transform: scaleX(0.015);
+      transform-origin: 100% 0%;
+      background-image: var(--lumo-progress-indeterminate-progress-bar-background-reverse);
+    }
+
+    75% {
+      transform: scaleX(0.4);
+    }
+
+    100% {
+      transform: scaleX(0.015);
+      transform-origin: 0% 0%;
+      background-image: var(--lumo-progress-indeterminate-progress-bar-background-reverse);
+    }
+  }
+
+  :host(:not([aria-valuenow])) [part='value']::before,
+  :host([indeterminate]) [part='value']::before {
+    content: '';
+    display: block;
+    width: 100%;
+    height: 100%;
+    border-radius: inherit;
+    background-color: var(--lumo-primary-color);
+    will-change: opacity;
+    animation: vaadin-progress-pulse3 1.6s infinite cubic-bezier(0.645, 0.045, 0.355, 1);
+  }
+
+  @keyframes vaadin-progress-pulse3 {
+    0% {
+      opacity: 1;
+    }
+
+    10% {
+      opacity: 0;
+    }
+
+    40% {
+      opacity: 0;
+    }
+
+    50% {
+      opacity: 1;
+    }
+
+    50.1% {
+      opacity: 1;
+    }
+
+    60% {
+      opacity: 0;
+    }
+
+    90% {
+      opacity: 0;
+    }
+
+    100% {
+      opacity: 1;
+    }
+  }
+
+  /* Contrast color */
+  :host([theme~='contrast']) [part='value'],
+  :host([theme~='contrast']) [part='value']::before {
+    background-color: var(--lumo-contrast-80pct);
+    --lumo-progress-indeterminate-progress-bar-background: linear-gradient(
+      to right,
+      var(--lumo-contrast-5pct) 10%,
+      var(--lumo-contrast-80pct)
+    );
+    --lumo-progress-indeterminate-progress-bar-background-reverse: linear-gradient(
+      to left,
+      var(--lumo-contrast-5pct) 10%,
+      var(--lumo-contrast-60pct)
+    );
+  }
+
+  /* Error color */
+  :host([theme~='error']) [part='value'],
+  :host([theme~='error']) [part='value']::before {
+    background-color: var(--lumo-error-color);
+    --lumo-progress-indeterminate-progress-bar-background: linear-gradient(
+      to right,
+      var(--lumo-error-color-10pct) 10%,
+      var(--lumo-error-color)
+    );
+    --lumo-progress-indeterminate-progress-bar-background-reverse: linear-gradient(
+      to left,
+      var(--lumo-error-color-10pct) 10%,
+      var(--lumo-error-color)
+    );
+  }
+
+  /* Primary color */
+  :host([theme~='success']) [part='value'],
+  :host([theme~='success']) [part='value']::before {
+    background-color: var(--lumo-success-color);
+    --lumo-progress-indeterminate-progress-bar-background: linear-gradient(
+      to right,
+      var(--lumo-success-color-10pct) 10%,
+      var(--lumo-success-color)
+    );
+    --lumo-progress-indeterminate-progress-bar-background-reverse: linear-gradient(
+      to left,
+      var(--lumo-success-color-10pct) 10%,
+      var(--lumo-success-color)
+    );
+  }
+
+  /* RTL specific styles */
+  :host([indeterminate][dir='rtl']) [part='value'] {
+    --lumo-progress-indeterminate-progress-bar-background: linear-gradient(
+      to left,
+      var(--lumo-primary-color-10pct) 10%,
+      var(--lumo-primary-color)
+    );
+    --lumo-progress-indeterminate-progress-bar-background-reverse: linear-gradient(
+      to right,
+      var(--lumo-primary-color-10pct) 10%,
+      var(--lumo-primary-color)
+    );
+    animation: vaadin-progress-indeterminate-rtl 1.6s infinite cubic-bezier(0.355, 0.045, 0.645, 1);
+  }
+
+  :host(:not([aria-valuenow])[dir='rtl']) [part='value']::before,
+  :host([indeterminate][dir='rtl']) [part='value']::before {
+    animation: vaadin-progress-pulse3 1.6s infinite cubic-bezier(0.355, 0.045, 0.645, 1);
+  }
+
+  @keyframes vaadin-progress-indeterminate-rtl {
+    0% {
+      transform: scaleX(0.015);
+      transform-origin: 100% 0%;
+    }
+
+    25% {
+      transform: scaleX(0.4);
+    }
+
+    50% {
+      transform: scaleX(0.015);
+      transform-origin: 0% 0%;
+      background-image: var(--lumo-progress-indeterminate-progress-bar-background);
+    }
+
+    50.1% {
+      transform: scaleX(0.015);
+      transform-origin: 0% 0%;
+      background-image: var(--lumo-progress-indeterminate-progress-bar-background-reverse);
+    }
+
+    75% {
+      transform: scaleX(0.4);
+    }
+
+    100% {
+      transform: scaleX(0.015);
+      transform-origin: 100% 0%;
+      background-image: var(--lumo-progress-indeterminate-progress-bar-background-reverse);
+    }
+  }
+
+  /* Contrast color */
+  :host([theme~='contrast'][dir='rtl']) [part='value'],
+  :host([theme~='contrast'][dir='rtl']) [part='value']::before {
+    --lumo-progress-indeterminate-progress-bar-background: linear-gradient(
+      to left,
+      var(--lumo-contrast-5pct) 10%,
+      var(--lumo-contrast-80pct)
+    );
+    --lumo-progress-indeterminate-progress-bar-background-reverse: linear-gradient(
+      to right,
+      var(--lumo-contrast-5pct) 10%,
+      var(--lumo-contrast-60pct)
+    );
+  }
+
+  /* Error color */
+  :host([theme~='error'][dir='rtl']) [part='value'],
+  :host([theme~='error'][dir='rtl']) [part='value']::before {
+    --lumo-progress-indeterminate-progress-bar-background: linear-gradient(
+      to left,
+      var(--lumo-error-color-10pct) 10%,
+      var(--lumo-error-color)
+    );
+    --lumo-progress-indeterminate-progress-bar-background-reverse: linear-gradient(
+      to right,
+      var(--lumo-error-color-10pct) 10%,
+      var(--lumo-error-color)
+    );
+  }
+
+  /* Primary color */
+  :host([theme~='success'][dir='rtl']) [part='value'],
+  :host([theme~='success'][dir='rtl']) [part='value']::before {
+    --lumo-progress-indeterminate-progress-bar-background: linear-gradient(
+      to left,
+      var(--lumo-success-color-10pct) 10%,
+      var(--lumo-success-color)
+    );
+    --lumo-progress-indeterminate-progress-bar-background-reverse: linear-gradient(
+      to right,
+      var(--lumo-success-color-10pct) 10%,
+      var(--lumo-success-color)
+    );
+  }
+}

package/src/components/radio-button.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_radio-button {
+  :host {
+    color: var(--vaadin-radio-button-label-color, var(--lumo-body-text-color));
+    font-size: var(--vaadin-radio-button-label-font-size, var(--lumo-font-size-m));
+    font-family: var(--lumo-font-family);
+    line-height: var(--lumo-line-height-s);
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    -webkit-tap-highlight-color: transparent;
+    -webkit-user-select: none;
+    user-select: none;
+    cursor: default;
+    outline: none;
+    --_radio-button-size: var(--vaadin-radio-button-size, calc(var(--lumo-size-m) / 2));
+    --_focus-ring-color: var(--vaadin-focus-ring-color, var(--lumo-primary-color-50pct));
+    --_focus-ring-width: var(--vaadin-focus-ring-width, 2px);
+    --_selection-color: var(--vaadin-selection-color, var(--lumo-primary-color));
+  }
+
+  :host([has-label]) ::slotted(label) {
+    padding: var(
+      --vaadin-radio-button-label-padding,
+      var(--lumo-space-xs) var(--lumo-space-s) var(--lumo-space-xs) var(--lumo-space-xs)
+    );
+  }
+
+  [part='radio'] {
+    --_input-size: var(--_radio-button-size);
+    margin: var(--lumo-space-xs);
+    position: relative;
+    border-radius: 50%;
+    background: var(--vaadin-radio-button-background, var(--lumo-contrast-20pct));
+    transition:
+      transform 0.2s cubic-bezier(0.12, 0.32, 0.54, 2),
+      background-color 0.15s;
+    will-change: transform;
+    cursor: var(--lumo-clickable-cursor);
+    /* Default field border color */
+    --_input-border-color: var(--vaadin-input-field-border-color, var(--lumo-contrast-50pct));
+  }
+
+  /* Used for activation "halo" */
+  [part='radio']::before {
+    pointer-events: none;
+    color: transparent;
+    width: 100%;
+    height: 100%;
+    border-radius: inherit;
+    background-color: inherit;
+    transform: scale(1.4);
+    opacity: 0;
+    transition:
+      transform 0.1s,
+      opacity 0.8s;
+    will-change: transform, opacity;
+  }
+
+  /* Used for the dot */
+  [part='radio']::after {
+    content: '';
+    pointer-events: none;
+    width: 0;
+    height: 0;
+    border: var(--vaadin-radio-button-dot-size, 3px) solid
+      var(--vaadin-radio-button-dot-color, var(--lumo-primary-contrast-color));
+    border-radius: 50%;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%) scale(0);
+    transition: 0.25s transform;
+    will-change: transform;
+    background-clip: content-box;
+  }
+
+  :host([checked]) {
+    --vaadin-input-field-border-color: transparent;
+  }
+
+  :host([checked]) [part='radio'] {
+    background-color: var(--_selection-color);
+  }
+
+  :host([checked]) [part='radio']::after {
+    transform: translate(-50%, -50%) scale(1);
+  }
+
+  :host(:not([checked]):not([disabled]):hover) [part='radio'] {
+    background: var(--vaadin-radio-button-background-hover, var(--lumo-contrast-30pct));
+  }
+
+  :host([active]) [part='radio'] {
+    transform: scale(0.9);
+    transition-duration: 0.05s;
+  }
+
+  :host([active][checked]) [part='radio'] {
+    transform: scale(1.1);
+  }
+
+  :host([active]:not([checked])) [part='radio']::before {
+    transition-duration: 0.01s, 0.01s;
+    transform: scale(0);
+    opacity: 0.4;
+  }
+
+  :host([focus-ring]) [part='radio'] {
+    box-shadow:
+      0 0 0 1px var(--lumo-base-color),
+      0 0 0 calc(var(--_focus-ring-width) + 1px) var(--_focus-ring-color),
+      inset 0 0 0 var(--_input-border-width, 0) var(--_input-border-color);
+  }
+
+  :host([disabled]) {
+    pointer-events: none;
+    color: var(--lumo-disabled-text-color);
+    --vaadin-input-field-border-color: var(--lumo-contrast-20pct);
+  }
+
+  :host([disabled]) ::slotted(label) {
+    color: inherit;
+  }
+
+  :host([disabled]) [part='radio'] {
+    background-color: var(--vaadin-radio-button-disabled-background, var(--lumo-contrast-10pct));
+  }
+
+  :host([disabled]) [part='radio']::after {
+    border-color: var(--vaadin-radio-button-disabled-dot-color, var(--lumo-contrast-30pct));
+  }
+
+  /* RTL specific styles */
+  :host([dir='rtl'][has-label]) ::slotted(label) {
+    padding: var(--lumo-space-xs) var(--lumo-space-xs) var(--lumo-space-xs) var(--lumo-space-s);
+  }
+
+  @media (forced-colors: active) {
+    [part='radio'] {
+      outline: 1px solid;
+      outline-offset: -1px;
+    }
+
+    :host([focused]) [part='radio'] {
+      outline-width: 2px;
+    }
+
+    :host([disabled]) [part='radio'] {
+      outline-color: GrayText;
+    }
+  }
+}

package/src/components/radio-group.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_radio-group {
+  :host(:hover:not([readonly]):not([focused])) [part='label'],
+  :host(:hover:not([readonly])) [part='helper-text'] {
+    color: var(--lumo-body-text-color);
+  }
+
+  /* Touch device adjustment */
+  @media (pointer: coarse) {
+    :host(:hover:not([readonly]):not([focused])) [part='label'] {
+      color: var(--lumo-secondary-text-color);
+    }
+  }
+}

package/src/components/rich-text-editor-popup-overlay.css

@@ -0,0 +1,27 @@
+/**
+ * @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_rich-text-editor-popup-overlay {
+  [part='overlay'] {
+    margin: var(--lumo-space-xs) 0;
+  }
+
+  [part='content'] {
+    padding: var(--lumo-space-xs);
+    max-width: calc(7 * (var(--_button-size) + var(--_button-margin) * 2));
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    --_button-size: 1.25rem;
+    --_button-margin: 3px;
+  }
+
+  [part='content'] ::slotted(button) {
+    border: none;
+    width: var(--_button-size);
+    height: var(--_button-size);
+    margin: var(--_button-margin);
+  }
+}