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

package/src/global/typography.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/
+ */
+:where(body, :host) {
+  font-family: var(--lumo-font-family);
+  font-size: var(--lumo-font-size-m);
+  line-height: var(--lumo-line-height-m);
+  -webkit-text-size-adjust: 100%;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+small,
+[theme~='font-size-s'] {
+  font-size: var(--lumo-font-size-s);
+  line-height: var(--lumo-line-height-s);
+}
+
+[theme~='font-size-xs'] {
+  font-size: var(--lumo-font-size-xs);
+  line-height: var(--lumo-line-height-xs);
+}
+
+:where(h1, h2, h3, h4, h5, h6) {
+  font-weight: 600;
+  line-height: var(--lumo-line-height-xs);
+  color: var(--lumo-header-text-color);
+  margin-block: 0;
+}
+
+:where(h1) {
+  font-size: var(--lumo-font-size-xxxl);
+}
+
+:where(h2) {
+  font-size: var(--lumo-font-size-xxl);
+}
+
+:where(h3) {
+  font-size: var(--lumo-font-size-xl);
+}
+
+:where(h4) {
+  font-size: var(--lumo-font-size-l);
+}
+
+:where(h5) {
+  font-size: var(--lumo-font-size-m);
+}
+
+:where(h6) {
+  font-size: var(--lumo-font-size-xs);
+  text-transform: uppercase;
+  letter-spacing: 0.03em;
+}
+
+p,
+blockquote {
+  margin-top: 0.5em;
+  margin-bottom: 0.75em;
+}
+
+a {
+  text-decoration: none;
+}
+
+a:where(:any-link) {
+  color: var(--lumo-primary-text-color);
+}
+
+a:where(:any-link):hover {
+  text-decoration: underline;
+}
+
+a:not(:any-link) {
+  color: var(--lumo-disabled-text-color);
+}
+
+hr {
+  display: block;
+  align-self: stretch;
+  height: 1px;
+  border: 0;
+  padding: 0;
+  margin: var(--lumo-space-s) calc(var(--lumo-border-radius-m) / 2);
+  background-color: var(--lumo-contrast-10pct);
+}
+
+b,
+strong {
+  font-weight: 600;
+}
+
+code,
+pre {
+  border-radius: var(--lumo-border-radius-m);
+}
+
+pre code {
+  background: transparent;
+}
+
+blockquote {
+  border-left: 2px solid var(--lumo-contrast-30pct);
+  color: var(--lumo-secondary-text-color);
+}
+
+blockquote[dir='rtl'] {
+  border-left: none;
+  border-right: 2px solid var(--lumo-contrast-30pct);
+}

package/src/mixins/checkable-field.css

@@ -0,0 +1,67 @@
+/**
+ * @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_checkable-field {
+  :host {
+    display: inline-block;
+  }
+
+  :host([hidden]) {
+    display: none !important;
+  }
+
+  :host([disabled]) {
+    -webkit-tap-highlight-color: transparent;
+  }
+
+  .vaadin-checkbox-container,
+  .vaadin-radio-button-container {
+    display: grid;
+    grid-template-columns: auto 1fr;
+    align-items: baseline;
+  }
+
+  [part='checkbox'],
+  [part='radio'],
+  [part='label'],
+  ::slotted(input),
+  ::slotted(label) {
+    grid-row: 1;
+  }
+
+  [part='checkbox'],
+  [part='radio'],
+  ::slotted(input) {
+    grid-column: 1;
+  }
+
+  /* Control container (checkbox, radio button) */
+  [part='checkbox'],
+  [part='radio'] {
+    width: var(--_input-size, 1em);
+    height: var(--_input-size, 1em);
+    --_input-border-width: var(--vaadin-input-field-border-width, 0);
+    --_input-border-color: var(--vaadin-input-field-border-color, transparent);
+    box-shadow: inset 0 0 0 var(--_input-border-width, 0) var(--_input-border-color);
+  }
+
+  [part='checkbox']::before,
+  [part='radio']::before {
+    display: block;
+    content: '\202F';
+    line-height: var(--_input-size, 1em);
+    contain: paint;
+  }
+
+  /* visually hidden */
+  ::slotted(input) {
+    cursor: inherit;
+    margin: 0;
+    align-self: stretch;
+    appearance: none;
+    width: initial;
+    height: initial;
+  }
+}

package/src/mixins/combo-box-loader.css

@@ -0,0 +1,14 @@
+/**
+ * @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_combo-box-loader {
+  [part='loader'] {
+    position: absolute;
+    z-index: 1;
+    inset-inline: var(--lumo-space-s);
+    top: var(--lumo-space-s);
+    margin-inline: auto 0;
+  }
+}

package/src/mixins/combo-box-overlay.css

@@ -0,0 +1,30 @@
+/**
+ * @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_combo-box-overlay {
+  [part='content'] {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    padding: 0;
+  }
+
+  /* When items are empty, the spinner needs some room */
+  :host(:not([closing])) [part='content'] {
+    min-height: calc(2 * var(--lumo-space-s) + var(--lumo-icon-size-s));
+  }
+
+  [part='overlay'] {
+    position: relative;
+  }
+
+  :host([top-aligned]) [part='overlay'] {
+    margin-top: var(--lumo-space-xs);
+  }
+
+  :host([bottom-aligned]) [part='overlay'] {
+    margin-bottom: var(--lumo-space-xs);
+  }
+}

package/src/mixins/dashboard-item.css

@@ -0,0 +1,252 @@
+/**
+ * @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_dashboard-item {
+  :host {
+    box-sizing: border-box;
+    --_widget-background: var(--vaadin-dashboard-widget-background, var(--lumo-base-color));
+    --_widget-border-radius: var(--vaadin-dashboard-widget-border-radius, var(--lumo-border-radius-l));
+    --_widget-border-width: var(--vaadin-dashboard-widget-border-width, 1px);
+    --_widget-border-color: var(--vaadin-dashboard-widget-border-color, var(--lumo-contrast-20pct));
+    --_widget-shadow: var(--vaadin-dashboard-widget-shadow, 0 0 0 0 transparent);
+    --_widget-editable-shadow: var(--lumo-box-shadow-s);
+    --_widget-selected-shadow:
+      0 2px 4px -1px var(--lumo-primary-color-10pct), 0 3px 12px -1px var(--lumo-primary-color-50pct);
+    --_drop-target-background-color: var(
+      --vaadin-dashboard-drop-target-background-color,
+      var(--lumo-primary-color-10pct)
+    );
+    --_drop-target-border: var(--vaadin-dashboard-drop-target-border, 1px dashed var(--lumo-primary-color-50pct));
+
+    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);
+    --_focus-ring-color: var(--vaadin-focus-ring-color, var(--lumo-primary-color-50pct));
+    --_focus-ring-width: var(--vaadin-focus-ring-width, 2px);
+    --_icon-color: var(--lumo-contrast-60pct);
+    opacity: var(--_widget-opacity);
+    filter: var(--_widget-filter);
+  }
+
+  :host([dragging]) * {
+    visibility: hidden;
+  }
+
+  :host(:not([editable])) [part~='move-button'],
+  :host(:not([editable])) [part~='remove-button'],
+  :host(:not([editable])) #focus-button,
+  :host(:not([editable])) #focus-button-wrapper,
+  :host(:not([editable])) .mode-controls {
+    display: none;
+  }
+
+  #focustrap {
+    display: contents;
+  }
+
+  #focus-button-wrapper,
+  #focus-button {
+    position: absolute;
+    inset: 0;
+    opacity: 0;
+  }
+
+  #focus-button {
+    pointer-events: none;
+    padding: 0;
+    border: none;
+  }
+
+  .mode-controls {
+    position: absolute;
+    inset: 0;
+    z-index: 2;
+  }
+
+  .mode-controls[hidden] {
+    display: none;
+  }
+
+  /* Move-mode buttons */
+  [part~='move-backward-button'],
+  [part~='move-forward-button'],
+  [part~='move-apply-button'] {
+    position: absolute;
+    top: 50%;
+  }
+
+  [part~='move-backward-button'] {
+    inset-inline-start: 0;
+    transform: translateY(-50%);
+  }
+
+  [part~='move-forward-button'] {
+    inset-inline-end: 0;
+    transform: translateY(-50%);
+  }
+
+  [part~='move-apply-button'] {
+    left: 50%;
+    transform: translate(-50%, -50%);
+    --icon: var(--lumo-icons-checkmark);
+    font-size: var(--lumo-icon-size-m);
+  }
+
+  :host([first-child]) [part~='move-backward-button'],
+  :host([last-child]) [part~='move-forward-button'] {
+    display: none;
+  }
+
+  /* Resize-mode buttons */
+  [part~='resize-shrink-width-button'],
+  [part~='resize-shrink-height-button'],
+  [part~='resize-grow-width-button'],
+  [part~='resize-grow-height-button'],
+  [part~='resize-apply-button'] {
+    position: absolute;
+  }
+
+  [part~='resize-shrink-width-button'] {
+    inset-inline-end: 0;
+    top: 50%;
+  }
+
+  :host(:not([dir='rtl'])) [part~='resize-shrink-width-button'] {
+    transform: translateY(-50%) translateX(-100%);
+  }
+
+  :host([dir='rtl']) [part~='resize-shrink-width-button'] {
+    transform: translateY(-50%) translateX(100%);
+  }
+
+  .mode-controls:has([part~='resize-grow-width-button'][hidden]) [part~='resize-shrink-width-button'] {
+    transform: translateY(-50%);
+  }
+
+  [part~='resize-grow-width-button'] {
+    inset-inline-start: 100%;
+    top: 50%;
+  }
+
+  :host(:not([dir='rtl'])) [part~='resize-grow-width-button'] {
+    transform: translateY(-50%) translateX(-100%);
+  }
+
+  :host([dir='rtl']) [part~='resize-grow-width-button'] {
+    transform: translateY(-50%) translateX(100%);
+  }
+
+  [part~='resize-shrink-height-button'] {
+    bottom: 0;
+    left: 50%;
+    transform: translateX(-50%) translateY(-100%);
+  }
+
+  [part~='resize-grow-height-button'] {
+    top: 100%;
+    left: 50%;
+    transform: translateX(-50%) translateY(-100%);
+  }
+
+  [part~='resize-apply-button'] {
+    left: 50%;
+    top: 50%;
+
+    transform: translate(-50%, -50%);
+  }
+
+  :host([focused]) {
+    z-index: 1;
+  }
+
+  header {
+    overflow: hidden;
+    display: flex;
+    align-items: start;
+    box-sizing: border-box;
+    justify-content: space-between;
+  }
+
+  [part='title'] {
+    flex: 1;
+    color: var(--lumo-header-text-color);
+    white-space: var(--vaadin-dashboard-widget-title-wrap, wrap);
+    text-overflow: ellipsis;
+    overflow: hidden;
+    line-height: var(--lumo-line-height-s);
+    margin: 0 0 1px;
+    align-self: safe center;
+  }
+
+  vaadin-dashboard-button {
+    font-family: 'lumo-icons';
+    font-size: var(--lumo-icon-size-m);
+    margin: 0;
+    z-index: 1;
+  }
+
+  vaadin-dashboard-button .icon::before {
+    display: block;
+    content: var(--icon);
+  }
+
+  /* Common styles for non-mode edit buttons */
+  [part='move-button'],
+  [part='resize-button'],
+  [part='remove-button'] {
+    color: var(--_icon-color);
+    padding-inline: 0;
+  }
+
+  :where([part='move-button'], [part='resize-button'], [part='remove-button']):hover {
+    --_icon-color: var(--lumo-primary-text-color);
+  }
+
+  :host([selected]) {
+    opacity: 1;
+    z-index: 1;
+    --_icon-color: var(--lumo-primary-text-color);
+  }
+
+  :host(:is([move-mode], [resize-mode])) {
+    --_icon-color: var(--lumo-disabled-text-color);
+  }
+
+  /* Drag handle */
+  [part~='move-button'] {
+    cursor: move;
+    --icon: var(--lumo-icons-drag-handle);
+  }
+
+  /* Remove button */
+  [part~='remove-button'] {
+    cursor: pointer;
+    --icon: var(--lumo-icons-cross);
+    margin-inline-start: var(--lumo-space-xs);
+  }
+
+  /* Mode controls */
+  .mode-controls vaadin-dashboard-button[focused] {
+    z-index: 3;
+  }
+
+  /* Move mode */
+
+  :host(:not([dir='rtl'])) [part~='move-backward-button'],
+  :host([dir='rtl']) [part~='move-forward-button'] {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+    --icon: var(--lumo-icons-angle-left);
+  }
+
+  :host(:not([dir='rtl'])) [part~='move-forward-button'],
+  :host([dir='rtl']) [part~='move-backward-button'] {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+    --icon: var(--lumo-icons-angle-right);
+  }
+}

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