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

package/src/components/date-picker-month-calendar.css

@@ -0,0 +1,192 @@
+/**
+ * @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_date-picker-month-calendar {
+  :host {
+    display: block;
+    -webkit-user-select: none;
+    -webkit-tap-highlight-color: transparent;
+    user-select: none;
+    font-size: var(--lumo-font-size-m);
+    color: var(--lumo-body-text-color);
+    text-align: center;
+    padding: 0 var(--lumo-space-xs);
+    --_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));
+    --_selection-color-text: var(--vaadin-selection-color-text, var(--lumo-primary-text-color));
+  }
+
+  #monthGrid {
+    width: 100%;
+    border-collapse: collapse;
+  }
+
+  #days-container tr,
+  #weekdays-container tr {
+    display: flex;
+  }
+
+  [part~='disabled'] {
+    pointer-events: none;
+  }
+
+  /* Month header */
+
+  [part='month-header'] {
+    color: var(--lumo-header-text-color);
+    font-size: var(--lumo-font-size-l);
+    line-height: 1;
+    font-weight: 500;
+    margin-bottom: var(--lumo-space-m);
+  }
+
+  /* Week days and numbers */
+
+  [part='weekdays'],
+  [part='weekday'],
+  [part='week-number'] {
+    font-size: var(--lumo-font-size-xxs);
+    line-height: 1;
+    color: var(--lumo-secondary-text-color);
+  }
+
+  [part='weekdays'] {
+    margin-bottom: var(--lumo-space-s);
+  }
+
+  [part='weekday']:empty,
+  [part='week-number'] {
+    flex-shrink: 0;
+    padding: 0;
+    width: var(--lumo-size-xs);
+  }
+
+  [part='week-number'][hidden],
+  [part='weekday'][hidden] {
+    display: none;
+  }
+
+  /* Date and week number cells */
+
+  [part~='date'],
+  [part='week-number'] {
+    box-sizing: border-box;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    height: var(--lumo-size-m);
+    position: relative;
+  }
+
+  [part~='date'] {
+    outline: none;
+    transition: color 0.1s;
+  }
+
+  [part~='date']:not(:empty) {
+    cursor: var(--lumo-clickable-cursor);
+  }
+
+  [part='weekday'],
+  [part~='date'] {
+    width: calc(100% / 7);
+    padding: 0;
+    font-weight: normal;
+  }
+
+  :host([week-numbers]) [part='weekday']:not(:empty),
+  :host([week-numbers]) [part~='date'] {
+    width: calc((100% - var(--lumo-size-xs)) / 7);
+  }
+
+  /* Today date */
+
+  [part~='date'][part~='today'] {
+    color: var(--_selection-color-text);
+  }
+
+  /* Focused date */
+
+  [part~='date']::before {
+    content: '';
+    position: absolute;
+    z-index: -1;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    min-width: 2em;
+    min-height: 2em;
+    width: 80%;
+    height: 80%;
+    max-height: 100%;
+    max-width: 100%;
+    border-radius: var(--lumo-border-radius-m);
+  }
+
+  [part~='date'][part~='focused']::before {
+    box-shadow:
+      0 0 0 1px var(--lumo-base-color),
+      0 0 0 calc(var(--_focus-ring-width) + 1px) var(--_focus-ring-color);
+  }
+
+  :host(:not([focused])) [part~='date'][part~='focused']::before {
+    animation: vaadin-date-picker-month-calendar-focus-date 1.4s infinite;
+  }
+
+  @keyframes vaadin-date-picker-month-calendar-focus-date {
+    50% {
+      box-shadow:
+        0 0 0 1px var(--lumo-base-color),
+        0 0 0 calc(var(--_focus-ring-width) + 1px) transparent;
+    }
+  }
+
+  [part~='date']:not(:empty):not([part~='disabled']):not([part~='selected']):hover::before {
+    background-color: var(--lumo-primary-color-10pct);
+  }
+
+  [part~='date'][part~='selected'] {
+    color: var(--lumo-primary-contrast-color);
+  }
+
+  [part~='date'][part~='selected']::before {
+    background-color: var(--_selection-color);
+  }
+
+  [part~='date'][part~='disabled'] {
+    color: var(--lumo-disabled-text-color);
+  }
+
+  @media (pointer: coarse) {
+    [part~='date']:hover:not([part~='selected'])::before,
+    :host(:not([focus-ring])) [part~='focused']:not([part~='selected'])::before {
+      display: none;
+    }
+
+    [part~='date']:not(:empty):not([part~='disabled']):active::before {
+      display: block;
+    }
+
+    :host(:not([focus-ring])) [part~='date'][part~='selected']::before {
+      box-shadow: none;
+    }
+  }
+  /* Disabled */
+
+  :host([disabled]) * {
+    color: var(--lumo-disabled-text-color) !important;
+  }
+
+  @media (forced-colors: active) {
+    [part~='date'][part~='focused'] {
+      outline: 1px solid;
+    }
+
+    [part~='date'][part~='selected'] {
+      outline: 3px solid;
+    }
+  }
+}

package/src/components/date-picker-overlay-content.css

@@ -0,0 +1,161 @@
+/**
+ * @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_date-picker-overlay-content {
+  :host {
+    display: grid;
+    grid-template-areas:
+      'header header'
+      'months years'
+      'toolbar years';
+    grid-template-columns: minmax(0, 1fr) 0;
+    height: 100%;
+    outline: none;
+    position: relative;
+    /* Background for the year scroller, placed here as we are using a mask image on the actual years part */
+    background-image: linear-gradient(var(--lumo-shade-5pct), var(--lumo-shade-5pct));
+    background-size: 57px 100%;
+    background-position: top right;
+    background-repeat: no-repeat;
+    cursor: default;
+  }
+
+  :host([dir='rtl']) {
+    background-position: top left;
+  }
+
+  :host([desktop]) {
+    grid-template-columns: minmax(0, 1fr) auto;
+  }
+
+  :host([fullscreen][years-visible]) {
+    grid-template-columns: minmax(0, 1fr) auto;
+  }
+
+  [hidden] {
+    display: none !important;
+  }
+
+  ::slotted([slot='months']) {
+    /* Month calendar height:
+          header height + margin-bottom
+        + weekdays height + margin-bottom
+        + date cell heights
+        + small margin between month calendars
+    */
+    /* prettier-ignore */
+    --vaadin-infinite-scroller-item-height:
+      calc(
+          var(--lumo-font-size-l) + var(--lumo-space-m)
+        + var(--lumo-font-size-xs) + var(--lumo-space-s)
+        + var(--lumo-size-m) * 6
+        + var(--lumo-space-s)
+      );
+    --vaadin-infinite-scroller-buffer-offset: 10%;
+    mask-image: linear-gradient(transparent, #000 10%, #000 85%, transparent);
+    position: relative;
+  }
+
+  ::slotted([slot='years']) {
+    /* TODO get rid of fixed magic number */
+    --vaadin-infinite-scroller-buffer-width: 57px;
+    width: 57px;
+    height: auto;
+    top: 0;
+    bottom: 0;
+    font-size: var(--lumo-font-size-s);
+    box-shadow: inset 2px 0 4px 0 var(--lumo-shade-5pct);
+    mask-image: linear-gradient(transparent, #000 35%, #000 65%, transparent);
+    cursor: var(--lumo-clickable-cursor);
+  }
+
+  :host([dir='rtl']) ::slotted([slot='years']) {
+    box-shadow: inset -2px 0 4px 0 var(--lumo-shade-5pct);
+  }
+
+  ::slotted([slot='years']:hover) {
+    --_lumo-date-picker-year-opacity: 1;
+  }
+
+  :host([desktop]) ::slotted([slot='years']),
+  :host([years-visible]) ::slotted([slot='years']) {
+    visibility: visible;
+  }
+
+  /* Year scroller position indicator */
+  ::slotted([slot='years'])::before {
+    border: none;
+    width: 1em;
+    height: 1em;
+    background-color: var(--lumo-base-color);
+    background-image: linear-gradient(var(--lumo-tint-5pct), var(--lumo-tint-5pct));
+    transform: translate(-75%, -50%) rotate(45deg);
+    border-top-right-radius: var(--lumo-border-radius-s);
+    box-shadow: 2px -2px 6px 0 var(--lumo-shade-5pct);
+    z-index: 1;
+  }
+
+  :host([dir='rtl']) ::slotted([slot='years'])::before {
+    right: 0;
+    transform: translate(75%, -50%) rotate(45deg);
+  }
+
+  [part='toolbar'] {
+    display: flex;
+    grid-area: toolbar;
+    justify-content: space-between;
+    padding: var(--lumo-space-s);
+    border-bottom-left-radius: var(--lumo-border-radius-l);
+  }
+
+  /* Narrow viewport mode (fullscreen) */
+
+  :host([fullscreen]) [part='toolbar'] {
+    grid-area: header;
+    margin-inline-end: 57px;
+    background-color: var(--lumo-base-color);
+  }
+
+  [part='toolbar'] ::slotted(vaadin-button) {
+    margin: 0;
+  }
+
+  /* Very narrow screen (year scroller initially hidden) */
+
+  [part='years-toggle-button'] {
+    display: flex;
+    align-items: center;
+    height: var(--lumo-size-m);
+    padding: 0 0.5em;
+    border-radius: var(--lumo-border-radius-m);
+    color: var(--lumo-primary-text-color);
+    font-weight: 500;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+
+  :host([years-visible]) [part='years-toggle-button'] {
+    background-color: var(--lumo-primary-color);
+    color: var(--lumo-primary-contrast-color);
+  }
+
+  /* TODO magic number (same as used for media-query in vaadin-date-picker-overlay-content) */
+  @media screen and (max-width: 374px) {
+    :host {
+      background-image: none;
+    }
+
+    :host([fullscreen]) [part='toolbar'] {
+      margin-inline-end: 0;
+    }
+
+    /* TODO make date-picker adapt to the width of the years part */
+    ::slotted([slot='years']) {
+      --vaadin-infinite-scroller-buffer-width: 50px;
+      width: 50px;
+      background-color: var(--lumo-shade-5pct);
+    }
+  }
+}

package/src/components/date-picker-overlay.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_date-picker-overlay {
+  [part='overlay'] {
+    display: flex;
+    flex: auto;
+
+    /*
+  Width:
+      date cell widths
+    + month calendar side padding
+    + year scroller width
+  */
+    /* prettier-ignore */
+    width:
+  calc(
+      var(--lumo-size-m) * 7
+    + var(--lumo-space-xs) * 2
+    + 57px
+  );
+    height: 100%;
+    max-height: calc(var(--lumo-size-m) * 14);
+    overflow: hidden;
+    -webkit-tap-highlight-color: transparent;
+    flex-direction: column;
+  }
+
+  [part='content'] {
+    flex: auto;
+    padding: 0;
+    height: 100%;
+    overflow: hidden;
+    mask-image: none;
+  }
+
+  :host([top-aligned]) [part='overlay'] {
+    margin-top: var(--lumo-space-xs);
+  }
+
+  :host([bottom-aligned]) [part='overlay'] {
+    margin-bottom: var(--lumo-space-xs);
+  }
+
+  @media (max-width: 450px), (max-height: 450px) {
+    [part='overlay'] {
+      width: 100vw;
+      height: 70vh;
+      max-height: 70vh;
+    }
+  }
+
+  @media (forced-colors: active) {
+    [part='overlay'] {
+      outline: 3px solid;
+    }
+  }
+}

package/src/components/date-picker-year.css

@@ -0,0 +1,35 @@
+/**
+ * @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_date-picker-year {
+  :host {
+    display: block;
+    height: 100%;
+  }
+
+  :host([current]) [part='year-number'] {
+    color: var(--lumo-primary-text-color);
+  }
+
+  :host(:not([current])) [part='year-number'],
+  [part='year-separator'] {
+    opacity: var(--_lumo-date-picker-year-opacity, 0.7);
+    transition: 0.2s opacity;
+  }
+
+  [part='year-number'],
+  [part='year-separator'] {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 50%;
+    transform: translateY(-50%);
+  }
+
+  [part='year-separator']::after {
+    color: var(--lumo-disabled-text-color);
+    content: '\2022';
+  }
+}

package/src/components/date-picker.css

@@ -0,0 +1,41 @@
+/**
+ * @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_date-picker {
+  :host([opened]) {
+    pointer-events: auto;
+  }
+
+  :host([dir='rtl']) [part='input-field'] {
+    direction: ltr;
+  }
+
+  :host([dir='rtl']) [part='input-field'] ::slotted(input)::placeholder {
+    direction: rtl;
+    text-align: left;
+  }
+
+  [part='toggle-button']::before {
+    content: var(--lumo-icons-calendar);
+  }
+
+  [part='clear-button']::before {
+    content: var(--lumo-icons-cross);
+  }
+
+  @media (max-width: 450px), (max-height: 450px) {
+    [part='overlay-content'] {
+      height: 70vh;
+    }
+  }
+
+  :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;
+  }
+}

package/src/components/date-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_date-time-picker {
+  .vaadin-date-time-picker-container {
+    --vaadin-field-default-width: auto;
+  }
+
+  .slots {
+    display: flex;
+    --vaadin-field-default-width: 12em;
+  }
+
+  .slots ::slotted([slot='date-picker']) {
+    min-width: 0;
+    flex: 1 1 auto;
+  }
+
+  .slots ::slotted([slot='time-picker']) {
+    min-width: 0;
+    flex: 1 1.65 auto;
+  }
+
+  ::slotted([slot='date-picker']) {
+    margin-inline-end: 2px;
+    --vaadin-input-field-top-end-radius: 0;
+    --vaadin-input-field-bottom-end-radius: 0;
+  }
+
+  ::slotted([slot='time-picker']) {
+    --vaadin-input-field-top-start-radius: 0;
+    --vaadin-input-field-bottom-start-radius: 0;
+  }
+}

package/src/components/details-summary.css

@@ -0,0 +1,131 @@
+/**
+ * @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_details-summary {
+  :host {
+    white-space: nowrap;
+    -webkit-user-select: none;
+    user-select: none;
+    display: flex;
+    align-items: center;
+    width: 100%;
+    outline: none;
+    padding: var(--lumo-space-s) 0;
+    box-sizing: border-box;
+    font-family: var(--lumo-font-family);
+    font-size: var(--lumo-font-size-m);
+    font-weight: 500;
+    line-height: var(--lumo-line-height-xs);
+    color: var(--lumo-secondary-text-color);
+    background-color: inherit;
+    border-radius: var(--lumo-border-radius-m);
+    cursor: var(--lumo-clickable-cursor);
+    -webkit-tap-highlight-color: transparent;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+
+  :host([hidden]) {
+    display: none !important;
+  }
+
+  :host([disabled]) {
+    pointer-events: none;
+  }
+
+  :host([disabled]),
+  :host([disabled]) [part='toggle'] {
+    color: var(--lumo-disabled-text-color);
+    cursor: default;
+  }
+
+  @media (hover: hover) {
+    :host(:hover:not([disabled])),
+    :host(:hover:not([disabled])) [part='toggle'] {
+      color: var(--lumo-contrast-80pct);
+    }
+  }
+
+  [part='toggle'] {
+    display: block;
+    width: 1em;
+    height: 1em;
+    margin-left: calc(var(--lumo-space-xs) * -1);
+    margin-right: var(--lumo-space-xs);
+    font-size: var(--lumo-icon-size-s);
+    line-height: 1;
+    color: var(--lumo-contrast-60pct);
+    font-family: 'lumo-icons';
+    cursor: var(--lumo-clickable-cursor);
+  }
+
+  [part='toggle']::before {
+    content: var(--lumo-icons-angle-right);
+  }
+
+  :host([opened]) [part='toggle'] {
+    transform: rotate(90deg);
+  }
+
+  [part='content'] {
+    flex-grow: 1;
+  }
+
+  /* RTL styles */
+  :host([dir='rtl']) [part='toggle'] {
+    margin-left: var(--lumo-space-xs);
+    margin-right: calc(var(--lumo-space-xs) * -1);
+  }
+
+  :host([dir='rtl']) [part='toggle']::before {
+    content: var(--lumo-icons-angle-left);
+  }
+
+  :host([opened][dir='rtl']) [part='toggle'] {
+    transform: rotate(-90deg);
+  }
+
+  /* Small */
+  :host([theme~='small']) {
+    padding-top: var(--lumo-space-xs);
+    padding-bottom: var(--lumo-space-xs);
+  }
+
+  :host([theme~='small']) [part='toggle'] {
+    margin-right: calc(var(--lumo-space-xs) / 2);
+  }
+
+  :host([theme~='small'][dir='rtl']) [part='toggle'] {
+    margin-left: calc(var(--lumo-space-xs) / 2);
+  }
+
+  /* Filled */
+  :host([theme~='filled']) {
+    padding: var(--lumo-space-s) calc(var(--lumo-space-s) + var(--lumo-space-xs) / 2);
+  }
+
+  /* Reverse */
+  :host([theme~='reverse']) {
+    justify-content: space-between;
+  }
+
+  :host([theme~='reverse']) [part='toggle'] {
+    order: 1;
+    margin-right: 0;
+  }
+
+  :host([theme~='reverse'][dir='rtl']) [part='toggle'] {
+    margin-left: 0;
+  }
+
+  /* Filled reverse */
+  :host([theme~='reverse'][theme~='filled']) {
+    padding-left: var(--lumo-space-m);
+  }
+
+  :host([theme~='reverse'][theme~='filled'][dir='rtl']) {
+    padding-right: var(--lumo-space-m);
+  }
+}

package/src/components/details.css

@@ -0,0 +1,37 @@
+/**
+ * @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_details {
+  :host {
+    margin: var(--lumo-space-xs) 0;
+    outline: none;
+    --_focus-ring-color: var(--vaadin-focus-ring-color, var(--lumo-primary-color-50pct));
+    --_focus-ring-width: var(--vaadin-focus-ring-width, 2px);
+  }
+
+  :host([focus-ring]) ::slotted([slot='summary']) {
+    box-shadow: 0 0 0 var(--_focus-ring-width) var(--_focus-ring-color);
+  }
+
+  [part='content'] {
+    padding: var(--lumo-space-xs) 0 var(--lumo-space-s);
+    font-size: var(--lumo-font-size-m);
+    line-height: var(--lumo-line-height-m);
+  }
+
+  :host([theme~='filled']) {
+    background-color: var(--lumo-contrast-5pct);
+    border-radius: var(--lumo-border-radius-m);
+  }
+
+  :host([theme~='filled']) [part='content'] {
+    padding-left: var(--lumo-space-m);
+    padding-right: var(--lumo-space-m);
+  }
+
+  :host([theme~='small']) [part$='content'] {
+    font-size: var(--lumo-font-size-s);
+  }
+}