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

package/src/components/tabs.css

@@ -0,0 +1,285 @@
+/**
+ * @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_tabs {
+  :host {
+    display: flex;
+    align-items: center;
+    -webkit-tap-highlight-color: transparent;
+  }
+
+  :host([hidden]) {
+    display: none !important;
+  }
+
+  :host([orientation='vertical']) {
+    display: block;
+    box-shadow: -1px 0 0 0 var(--lumo-contrast-10pct);
+  }
+
+  :host([orientation='vertical']) [part='tabs'] {
+    height: 100%;
+    overflow-y: auto;
+    width: 100%;
+    margin: 0.5rem 0;
+  }
+
+  :host(:not([orientation='vertical'])) {
+    box-shadow: inset 0 -1px 0 0 var(--lumo-contrast-10pct);
+    position: relative;
+    min-height: var(--lumo-size-l);
+  }
+
+  :host([orientation='horizontal']) [part='tabs'] {
+    flex-grow: 1;
+    display: flex;
+    align-self: stretch;
+    overflow-x: auto;
+    margin: 0 0.75rem;
+  }
+
+  :host([orientation='horizontal']) [part='tabs'] ::slotted(vaadin-tab:not([theme~='icon-on-top'])) {
+    justify-content: center;
+  }
+
+  /*
+  This seems more future-proof than `overflow: -moz-scrollbars-none` which is marked obsolete
+  and is no longer guaranteed to work:
+  https://developer.mozilla.org/en-US/docs/Web/CSS/overflow#Mozilla_Extensions
+*/
+  @-moz-document url-prefix() {
+    :host([orientation='horizontal']) [part='tabs'] {
+      overflow: hidden;
+    }
+  }
+
+  :host([orientation='horizontal']) [part='tabs']::-webkit-scrollbar {
+    display: none;
+  }
+
+  [part='back-button'],
+  [part='forward-button'] {
+    pointer-events: none;
+    opacity: 0;
+    cursor: default;
+    position: absolute;
+    z-index: 1;
+    font-family: lumo-icons;
+    color: var(--lumo-tertiary-text-color);
+    font-size: var(--lumo-icon-size-m);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 1.5em;
+    height: 100%;
+    transition: 0.2s opacity;
+    top: 0;
+  }
+
+  [part='forward-button']:hover,
+  [part='back-button']:hover {
+    color: inherit;
+  }
+
+  :host([overflow~='start']) [part='back-button'],
+  :host([overflow~='end']) [part='forward-button'] {
+    pointer-events: auto;
+    opacity: 1;
+  }
+
+  [part='back-button']::after {
+    content: var(--lumo-icons-angle-left);
+  }
+
+  [part='forward-button']::after {
+    content: var(--lumo-icons-angle-right);
+  }
+
+  :host([orientation='vertical']) [part='back-button'],
+  :host([orientation='vertical']) [part='forward-button'] {
+    display: none;
+  }
+
+  /* Tabs overflow */
+
+  [part='tabs'] {
+    --_lumo-tabs-overflow-mask-image: none;
+    mask-image: var(--_lumo-tabs-overflow-mask-image);
+  }
+
+  /* Horizontal tabs overflow */
+
+  /* Both ends overflowing */
+  :host([overflow~='start'][overflow~='end']:not([orientation='vertical'])) [part='tabs'] {
+    --_lumo-tabs-overflow-mask-image: linear-gradient(
+      90deg,
+      transparent 2em,
+      #000 4em,
+      #000 calc(100% - 4em),
+      transparent calc(100% - 2em)
+    );
+  }
+
+  /* End overflowing */
+  :host([overflow~='end']:not([orientation='vertical'])) [part='tabs'] {
+    --_lumo-tabs-overflow-mask-image: linear-gradient(90deg, #000 calc(100% - 4em), transparent calc(100% - 2em));
+  }
+
+  /* Start overflowing */
+  :host([overflow~='start']:not([orientation='vertical'])) [part='tabs'] {
+    --_lumo-tabs-overflow-mask-image: linear-gradient(90deg, transparent 2em, #000 4em);
+  }
+
+  /* Vertical tabs overflow */
+
+  /* Both ends overflowing */
+  :host([overflow~='start'][overflow~='end'][orientation='vertical']) [part='tabs'] {
+    --_lumo-tabs-overflow-mask-image: linear-gradient(transparent, #000 2em, #000 calc(100% - 2em), transparent);
+  }
+
+  /* End overflowing */
+  :host([overflow~='end'][orientation='vertical']) [part='tabs'] {
+    --_lumo-tabs-overflow-mask-image: linear-gradient(#000 calc(100% - 2em), transparent);
+  }
+
+  /* Start overflowing */
+  :host([overflow~='start'][orientation='vertical']) [part='tabs'] {
+    --_lumo-tabs-overflow-mask-image: linear-gradient(transparent, #000 2em);
+  }
+
+  :host [part='tabs'] ::slotted(:not(vaadin-tab)) {
+    margin-left: var(--lumo-space-m);
+  }
+
+  /* Centered */
+
+  :host([theme~='centered'][orientation='horizontal']) ::slotted(vaadin-tab:first-of-type) {
+    margin-inline-start: auto;
+  }
+
+  :host([theme~='centered'][orientation='horizontal']) ::slotted(vaadin-tab:last-of-type) {
+    margin-inline-end: auto;
+  }
+
+  /* Small */
+
+  :host([theme~='small']),
+  :host([theme~='small']) [part='tabs'] {
+    min-height: var(--lumo-size-m);
+  }
+
+  :host([theme~='small']) [part='tabs'] ::slotted(vaadin-tab) {
+    font-size: var(--lumo-font-size-s);
+  }
+
+  /* Minimal */
+
+  :host([theme~='minimal']) {
+    box-shadow: none;
+    --_lumo-tab-marker-display: none;
+  }
+
+  /* Hide-scroll-buttons */
+
+  :host([theme~='hide-scroll-buttons']) [part='back-button'],
+  :host([theme~='hide-scroll-buttons']) [part='forward-button'] {
+    display: none;
+  }
+
+  :host([theme~='hide-scroll-buttons'][overflow~='start'][overflow~='end']:not([orientation='vertical']))
+    [part='tabs'] {
+    --_lumo-tabs-overflow-mask-image: linear-gradient(
+      90deg,
+      transparent,
+      #000 2em,
+      #000 calc(100% - 2em),
+      transparent 100%
+    );
+  }
+
+  :host([theme~='hide-scroll-buttons'][overflow~='end']:not([orientation='vertical'])) [part='tabs'] {
+    --_lumo-tabs-overflow-mask-image: linear-gradient(90deg, #000 calc(100% - 2em), transparent 100%);
+  }
+
+  :host([theme~='hide-scroll-buttons'][overflow~='start']:not([orientation='vertical'])) [part='tabs'] {
+    --_lumo-tabs-overflow-mask-image: linear-gradient(90deg, transparent, #000 2em);
+  }
+
+  /* Equal-width tabs */
+  :host([theme~='equal-width-tabs']) {
+    flex: auto;
+  }
+
+  :host([theme~='equal-width-tabs']) [part='tabs'] ::slotted(vaadin-tab) {
+    flex: 1 0 0%;
+  }
+
+  /* RTL specific styles */
+
+  :host(:not([dir='rtl'])) [part='forward-button'] {
+    right: 0;
+  }
+
+  :host([dir='rtl']) [part='back-button']::after {
+    content: var(--lumo-icons-angle-right);
+  }
+
+  :host([dir='rtl']) [part='forward-button']::after {
+    content: var(--lumo-icons-angle-left);
+  }
+
+  :host([dir='rtl'][orientation='vertical']) {
+    box-shadow: 1px 0 0 0 var(--lumo-contrast-10pct);
+  }
+
+  :host([dir='rtl']) [part='forward-button'] {
+    left: 0;
+  }
+
+  :host([dir='rtl']) [part='tabs'] ::slotted(:not(vaadin-tab)) {
+    margin-left: 0;
+    margin-right: var(--lumo-space-m);
+  }
+
+  /* Both ends overflowing */
+  :host([dir='rtl'][overflow~='start'][overflow~='end']:not([orientation='vertical'])) [part='tabs'] {
+    --_lumo-tabs-overflow-mask-image: linear-gradient(
+      -90deg,
+      transparent 2em,
+      #000 4em,
+      #000 calc(100% - 4em),
+      transparent calc(100% - 2em)
+    );
+  }
+
+  /* End overflowing */
+  :host([dir='rtl'][overflow~='end']:not([orientation='vertical'])) [part='tabs'] {
+    --_lumo-tabs-overflow-mask-image: linear-gradient(-90deg, #000 calc(100% - 4em), transparent calc(100% - 2em));
+  }
+
+  /* Start overflowing */
+  :host([dir='rtl'][overflow~='start']:not([orientation='vertical'])) [part='tabs'] {
+    --_lumo-tabs-overflow-mask-image: linear-gradient(-90deg, transparent 2em, #000 4em);
+  }
+
+  :host([dir='rtl'][theme~='hide-scroll-buttons'][overflow~='start'][overflow~='end']:not([orientation='vertical']))
+    [part='tabs'] {
+    --_lumo-tabs-overflow-mask-image: linear-gradient(
+      -90deg,
+      transparent,
+      #000 2em,
+      #000 calc(100% - 2em),
+      transparent 100%
+    );
+  }
+
+  :host([dir='rtl'][theme~='hide-scroll-buttons'][overflow~='end']:not([orientation='vertical'])) [part='tabs'] {
+    --_lumo-tabs-overflow-mask-image: linear-gradient(-90deg, #000 calc(100% - 2em), transparent 100%);
+  }
+
+  :host([dir='rtl'][theme~='hide-scroll-buttons'][overflow~='start']:not([orientation='vertical'])) [part='tabs'] {
+    --_lumo-tabs-overflow-mask-image: linear-gradient(-90deg, transparent, #000 2em);
+  }
+}

package/src/components/tabsheet.css

@@ -0,0 +1,59 @@
+/**
+ * @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_tabsheet {
+  :host {
+    display: flex;
+    flex-direction: column;
+    font-size: var(--lumo-font-size-m);
+    line-height: var(--lumo-line-height-m);
+    font-family: var(--lumo-font-family);
+  }
+
+  :host([hidden]) {
+    display: none !important;
+  }
+
+  [part='tabs-container'] {
+    position: relative;
+    display: flex;
+    align-items: center;
+    box-shadow: inset 0 -1px 0 0 var(--lumo-contrast-10pct);
+    padding: var(--lumo-space-xs) var(--lumo-space-s);
+    gap: var(--lumo-space-s);
+  }
+
+  ::slotted([slot='tabs']) {
+    flex: 1;
+    align-self: stretch;
+    min-width: 8em;
+    box-shadow: initial;
+    margin: calc(var(--lumo-space-xs) * -1) calc(var(--lumo-space-s) * -1);
+  }
+
+  [part='content'] {
+    position: relative;
+    flex: 1;
+    box-sizing: border-box;
+    padding: var(--lumo-space-s) var(--lumo-space-m);
+    border-bottom-left-radius: inherit;
+    border-bottom-right-radius: inherit;
+  }
+
+  :host([theme~='bordered']) {
+    border: 1px solid var(--lumo-contrast-20pct);
+    border-radius: var(--lumo-border-radius-l);
+  }
+
+  :host([loading]) [part='content'] {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  :host([theme~='no-padding']) [part='content'] {
+    padding: 0;
+  }
+}

package/src/components/text-area.css

@@ -0,0 +1,116 @@
+/**
+ * @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_text-area {
+  .vaadin-text-area-container {
+    flex: auto;
+  }
+
+  /* The label, helper text and the error message should neither grow nor shrink. */
+  [part='label'],
+  [part='helper-text'],
+  [part='error-message'] {
+    flex: none;
+  }
+
+  ::slotted(textarea) {
+    appearance: none;
+    flex: auto;
+    overflow: hidden;
+    width: 100%;
+    height: 100%;
+    outline: none;
+    resize: none;
+    margin: 0;
+    padding: 0 0.25em;
+    border: 0;
+    border-radius: 0;
+    min-width: 0;
+    font: inherit;
+    font-size: 1em;
+    line-height: normal;
+    color: inherit;
+    background-color: transparent;
+    /* Disable default invalid style in Firefox */
+    box-shadow: none;
+  }
+
+  /* Override styles from <vaadin-input-container> */
+  [part='input-field'] ::slotted(textarea) {
+    align-self: stretch;
+    white-space: pre-wrap;
+    line-height: inherit;
+    --_lumo-text-field-overflow-mask-image: none;
+  }
+
+  [part='input-field'] ::slotted(:not(textarea)) {
+    align-self: flex-start;
+  }
+
+  /* Workaround https://bugzilla.mozilla.org/show_bug.cgi?id=1739079 */
+  :host([disabled]) ::slotted(textarea) {
+    user-select: none;
+  }
+
+  [part='input-field'],
+  [part='input-field'] ::slotted(textarea) {
+    height: auto;
+    box-sizing: border-box;
+    min-height: 0;
+  }
+
+  [part='input-field'] {
+    flex: auto;
+    overflow: auto;
+    /* Equal to the implicit padding in vaadin-text-field */
+    padding-top: calc((var(--lumo-text-field-size) - 1em * var(--lumo-line-height-s)) / 2);
+    padding-bottom: calc((var(--lumo-text-field-size) - 1em * var(--lumo-line-height-s)) / 2);
+    transition: background-color 0.1s;
+    line-height: var(--lumo-line-height-s);
+  }
+
+  :host(:not([readonly])) [part='input-field']::after {
+    display: none;
+  }
+
+  :host([readonly]) [part='input-field'] {
+    border: var(--vaadin-input-field-readonly-border, 1px dashed var(--lumo-contrast-30pct));
+  }
+
+  :host([readonly]) [part='input-field']::after {
+    border: none;
+  }
+
+  :host(:hover:not([readonly]):not([focused]):not([invalid])) [part='input-field'] {
+    background-color: var(--lumo-contrast-20pct);
+  }
+
+  @media (pointer: coarse) {
+    :host(:hover:not([readonly]):not([focused]):not([invalid])) [part='input-field'] {
+      background-color: var(--lumo-contrast-10pct);
+    }
+
+    :host(:active:not([readonly]):not([focused])) [part='input-field'] {
+      background-color: var(--lumo-contrast-20pct);
+    }
+  }
+
+  /* Use sticky positioning to keep prefix/suffix/clear button visible when scrolling textarea container */
+  [part='input-field'] ::slotted([slot$='fix']),
+  [part='clear-button'] {
+    position: sticky;
+    top: 0;
+    align-self: flex-start;
+  }
+
+  [part='input-field'] ::slotted(vaadin-icon[slot$='fix']),
+  [part='clear-button'] {
+    /* Vertically align icon prefix/suffix/clear button with the first line of text */
+    top: calc((var(--lumo-icon-size-m) - 1em * var(--lumo-line-height-s)) / -2);
+    margin-top: calc((var(--lumo-icon-size-m) - 1em * var(--lumo-line-height-s)) / -2);
+    /* Reduce effective height to match line height of native textarea, so icons don't increase component size when using single row */
+    margin-bottom: calc((var(--lumo-icon-size-m) - 1em * var(--lumo-line-height-s)) / -2);
+  }
+}

package/src/components/time-picker-overlay.css

@@ -0,0 +1,15 @@
+/**
+ * @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_time-picker-overlay {
+  :host {
+    --_vaadin-time-picker-items-container-border-width: var(--lumo-space-xs);
+    --_vaadin-time-picker-items-container-border-style: solid;
+  }
+
+  #overlay {
+    width: var(--vaadin-time-picker-overlay-width, var(--_vaadin-time-picker-overlay-default-width, auto));
+  }
+}

package/src/components/time-picker.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_time-picker {
+  :host([opened]) {
+    pointer-events: auto;
+  }
+
+  [part~='toggle-button'] {
+    cursor: pointer;
+  }
+
+  [part='toggle-button']::before {
+    content: var(--lumo-icons-clock);
+  }
+
+  /* See https://github.com/vaadin/vaadin-time-picker/issues/145 */
+  :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-shown) {
+    --_lumo-text-field-overflow-mask-image: none;
+  }
+
+  :host([dir='rtl']) [part='input-field'] ::slotted(input)::placeholder {
+    direction: rtl;
+    text-align: left;
+  }
+}

package/src/components/tooltip-overlay.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_tooltip-overlay {
+  :host {
+    --vaadin-tooltip-offset-top: var(--lumo-space-xs);
+    --vaadin-tooltip-offset-bottom: var(--lumo-space-xs);
+    --vaadin-tooltip-offset-start: var(--lumo-space-xs);
+    --vaadin-tooltip-offset-end: var(--lumo-space-xs);
+  }
+
+  [part='overlay'] {
+    max-width: 40ch;
+    background: var(--lumo-base-color) linear-gradient(var(--lumo-contrast-5pct), var(--lumo-contrast-5pct));
+    color: var(--lumo-body-text-color);
+    font-size: var(--lumo-font-size-xs);
+    line-height: var(--lumo-line-height-s);
+  }
+
+  [part='content'] {
+    white-space: pre-wrap;
+    padding: var(--lumo-space-xs) var(--lumo-space-s);
+  }
+
+  :host([position^='top'][top-aligned]) [part='overlay'],
+  :host([position^='bottom'][top-aligned]) [part='overlay'] {
+    margin-top: var(--vaadin-tooltip-offset-top, 0);
+  }
+
+  :host([position^='top'][bottom-aligned]) [part='overlay'],
+  :host([position^='bottom'][bottom-aligned]) [part='overlay'] {
+    margin-bottom: var(--vaadin-tooltip-offset-bottom, 0);
+  }
+
+  :host([position^='start'][start-aligned]) [part='overlay'],
+  :host([position^='end'][start-aligned]) [part='overlay'] {
+    margin-inline-start: var(--vaadin-tooltip-offset-start, 0);
+  }
+
+  :host([position^='start'][end-aligned]) [part='overlay'],
+  :host([position^='end'][end-aligned]) [part='overlay'] {
+    margin-inline-end: var(--vaadin-tooltip-offset-end, 0);
+  }
+
+  @media (forced-colors: active) {
+    [part='overlay'] {
+      outline: 1px dashed;
+    }
+  }
+}

package/src/components/upload-file-list.css

@@ -0,0 +1,24 @@
+/**
+ * @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_upload-file-list {
+  :host {
+    display: block;
+  }
+
+  :host([hidden]) {
+    display: none !important;
+  }
+
+  [part='list'] {
+    padding: 0;
+    margin: 0;
+    list-style-type: none;
+  }
+
+  ::slotted(li:not(:first-of-type)) {
+    border-top: 1px solid var(--lumo-contrast-10pct);
+  }
+}