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

package/src/components/crud.css

@@ -0,0 +1,157 @@
+/**
+ * @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_crud {
+  :host {
+    --vaadin-crud-editor-max-height: 40%;
+    --vaadin-crud-editor-max-width: 40%;
+    --_focus-ring-color: var(--vaadin-focus-ring-color, var(--lumo-primary-color-50pct));
+    --_focus-ring-width: var(--vaadin-focus-ring-width, 2px);
+    width: 100%;
+    height: 400px;
+    font-family: var(--lumo-font-family);
+  }
+
+  :host,
+  #main {
+    display: flex;
+    flex-direction: column;
+    align-self: stretch;
+    position: relative;
+    overflow: hidden;
+  }
+
+  #main {
+    flex: 1 1 100%;
+    height: 100%;
+  }
+
+  :host([hidden]),
+  [hidden] {
+    display: none !important;
+  }
+
+  [part='toolbar'] {
+    display: flex;
+    flex-shrink: 0;
+    align-items: baseline;
+    justify-content: flex-end;
+    padding: var(--lumo-space-s) var(--lumo-space-m);
+    background-color: var(--lumo-contrast-5pct);
+    border-right: 1px solid var(--lumo-contrast-10pct);
+    border-left: 1px solid var(--lumo-contrast-10pct);
+    border-bottom: 1px solid var(--lumo-contrast-10pct);
+  }
+
+  :host([no-toolbar]) [part='toolbar'] {
+    display: none;
+  }
+
+  #container {
+    display: flex;
+    height: 100%;
+  }
+
+  :host([editor-position='bottom']) #container {
+    flex-direction: column;
+  }
+
+  [part='editor'] {
+    z-index: 1;
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    outline: none;
+    background: var(--lumo-base-color);
+    box-sizing: border-box;
+    position: relative;
+  }
+
+  :host(:not([editor-position=''])[editor-opened]:not([fullscreen])) [part='editor'] {
+    flex: 1 0 100%;
+  }
+
+  :host([editor-position='bottom'][editor-opened]:not([fullscreen])) [part='editor'] {
+    max-height: var(--vaadin-crud-editor-max-height);
+  }
+
+  :host([editor-position='aside'][editor-opened]:not([fullscreen])) [part='editor'] {
+    min-width: 300px;
+    max-width: var(--vaadin-crud-editor-max-width);
+  }
+
+  [part='scroller'] {
+    display: flex;
+    flex-direction: column;
+    overflow: auto;
+    flex: auto;
+    padding: var(--lumo-space-l);
+  }
+
+  [part='footer'] {
+    display: flex;
+    flex: none;
+    flex-direction: row-reverse;
+    background-color: var(--lumo-contrast-5pct);
+    padding: var(--lumo-space-s);
+  }
+
+  [part='header'] ::slotted(h3) {
+    margin-top: 0 !important;
+  }
+
+  :host(:not([dir='rtl'])) ::slotted([slot='delete-button']) {
+    margin-right: auto;
+  }
+
+  :host([dir='rtl']) ::slotted([slot='delete-button']) {
+    margin-left: auto;
+  }
+
+  :host(:not([dir='rtl'])) [part='toolbar'] ::slotted(*:not(:first-child)) {
+    margin-left: var(--lumo-space-s);
+  }
+
+  :host([dir='rtl']) [part='toolbar'] ::slotted(*:not(:first-child)) {
+    margin-right: var(--lumo-space-s);
+  }
+
+  :host([theme~='no-border']) [part='toolbar'] {
+    border: 0;
+  }
+
+  [part='footer'] ::slotted(*) {
+    margin-left: var(--lumo-space-s);
+    margin-right: var(--lumo-space-s);
+  }
+
+  [part='editor']:focus::before {
+    position: absolute;
+    inset: 0;
+    content: '';
+    box-shadow: inset 0 0 0 var(--_focus-ring-width) var(--_focus-ring-color);
+    pointer-events: none;
+  }
+
+  :host(:not([editor-position=''])) [part='editor']:not([hidden]) {
+    box-shadow: var(--lumo-box-shadow-m);
+  }
+
+  :host(:not([theme~='no-border']):not([editor-position=''])) [part='editor']:not([hidden]) {
+    border: 1px solid var(--lumo-contrast-20pct);
+  }
+
+  :host(:not([theme~='no-border'])[editor-position='bottom']) [part='editor']:not([hidden]) {
+    border-top: 0;
+  }
+
+  :host(:not([dir='rtl'])[editor-position='aside']) [part='editor']:not([hidden]) {
+    border-left: 0;
+  }
+
+  :host([dir='rtl']:not([theme~='no-border'])[editor-position='aside']) [part='editor']:not([hidden]) {
+    border-right: 0;
+  }
+}

package/src/components/custom-field.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_custom-field {
+  :host {
+    display: inline-flex;
+    --lumo-text-field-size: var(--lumo-size-m);
+    color: var(--lumo-body-text-color);
+    font-size: var(--lumo-font-size-m);
+    /* align with text-field height + vertical paddings */
+    line-height: calc(var(--lumo-text-field-size) + 2 * var(--lumo-space-xs));
+    font-family: var(--lumo-font-family);
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    -webkit-tap-highlight-color: transparent;
+    padding: 0;
+  }
+
+  :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 */
+    margin-top: var(--lumo-space-xs);
+    height: var(--lumo-text-field-size);
+    box-sizing: border-box;
+    display: inline-flex;
+    align-items: center;
+  }
+
+  :host([hidden]) {
+    display: none !important;
+  }
+
+  .vaadin-custom-field-container {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .inputs-wrapper {
+    flex: none;
+  }
+
+  /* align with text-field label */
+  :host([has-label]) [part='label'] {
+    padding-bottom: calc(0.5em - var(--lumo-space-xs));
+  }
+
+  :host(:not([has-label])) [part='label'],
+  :host(:not([has-label]))::before {
+    display: none;
+  }
+
+  /* align with text-field error message */
+  :host([has-error-message]) [part='error-message']::before {
+    height: calc(0.4em - var(--lumo-space-xs));
+  }
+
+  :host([focused]:not([readonly]):not([disabled])) [part='label'] {
+    color: var(--lumo-primary-text-color);
+  }
+
+  :host(:hover:not([readonly]):not([disabled]):not([focused])) [part='label'],
+  :host(:hover:not([readonly]):not([disabled]):not([focused])) [part='helper-text'] {
+    color: var(--lumo-body-text-color);
+  }
+
+  /* Touch device adjustment */
+  @media (pointer: coarse) {
+    :host(:hover:not([readonly]):not([disabled]):not([focused])) [part='label'] {
+      color: var(--lumo-secondary-text-color);
+    }
+  }
+
+  /* Disabled */
+  :host([disabled]) [part='label'] {
+    color: var(--lumo-disabled-text-color);
+    -webkit-text-fill-color: var(--lumo-disabled-text-color);
+  }
+
+  /* Small theme */
+  :host([theme~='small']) {
+    font-size: var(--lumo-font-size-s);
+    --lumo-text-field-size: var(--lumo-size-s);
+  }
+
+  :host([theme~='small'][has-label]) [part='label'] {
+    font-size: var(--lumo-font-size-xs);
+  }
+
+  :host([theme~='small'][has-label]) [part='error-message'] {
+    font-size: var(--lumo-font-size-xxs);
+  }
+
+  /* When custom-field is used with components without outer margin */
+  :host([theme~='whitespace'][has-label]) [part='label'] {
+    padding-bottom: 0.5em;
+  }
+}

package/src/components/dashboard-layout.css

@@ -0,0 +1,94 @@
+/**
+ * @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_dashboard-layout {
+  :host {
+    display: block;
+    overflow: auto;
+    box-sizing: border-box;
+    width: 100%;
+  }
+
+  :host([hidden]) {
+    display: none !important;
+  }
+
+  :host([dense-layout]) #grid {
+    grid-auto-flow: dense;
+  }
+
+  #grid {
+    box-sizing: border-box;
+
+    /* Padding around dashboard edges */
+    --_default-padding: var(--lumo-space-m);
+    --_padding: max(0px, var(--vaadin-dashboard-padding, var(--_default-padding)));
+    padding: var(--_padding);
+
+    /* Gap between widgets */
+    --_default-gap: var(--lumo-space-m);
+    --_gap: max(0px, var(--vaadin-dashboard-gap, var(--_default-gap)));
+    gap: var(--_gap);
+
+    /* Default min and max column widths */
+    --_default-col-min-width: 25rem;
+    --_default-col-max-width: 1fr;
+
+    /* Effective min and max column widths */
+    --_col-min-width: var(--vaadin-dashboard-col-min-width, var(--_default-col-min-width));
+    --_col-max-width: var(--vaadin-dashboard-col-max-width, var(--_default-col-max-width));
+
+    /* Effective max column count */
+    --_col-max-count: var(--vaadin-dashboard-col-max-count, var(--_col-count));
+
+    /* Effective column count */
+    --_effective-col-count: min(var(--_col-count), var(--_col-max-count));
+
+    /* Default row min height */
+    --_default-row-min-height: 12rem;
+    /* Effective row min height */
+    --_row-min-height: var(--vaadin-dashboard-row-min-height, var(--_default-row-min-height));
+    /* Effective row height */
+    --_row-height: minmax(var(--_row-min-height, auto), auto);
+
+    display: grid;
+    overflow: hidden;
+    min-width: calc(var(--_col-min-width) + var(--_padding) * 2);
+
+    grid-template-columns: repeat(
+      var(--_effective-col-count, auto-fill),
+      minmax(var(--_col-min-width), var(--_col-max-width))
+    );
+
+    grid-auto-rows: var(--_row-height);
+  }
+
+  ::slotted(*) {
+    /* The grid-column value applied to children */
+    --_item-column: span min(var(--vaadin-dashboard-widget-colspan, 1), var(--_effective-col-count, var(--_col-count)));
+
+    grid-column: var(--_item-column);
+
+    /* The grid-row value applied to children */
+    --_item-row: span var(--vaadin-dashboard-widget-rowspan, 1);
+    grid-row: var(--_item-row);
+  }
+
+  :host([theme~='shaded-background']) {
+    background: var(--lumo-shade-5pct);
+  }
+
+  :host([theme~='elevated-widgets']) {
+    --vaadin-dashboard-widget-shadow: var(--lumo-box-shadow-xs);
+    --vaadin-dashboard-widget-border-color: var(--lumo-contrast-10pct);
+    --vaadin-dashboard-widget-background: linear-gradient(var(--lumo-tint-5pct), var(--lumo-tint-5pct))
+      var(--lumo-base-color);
+  }
+
+  :host([theme~='flat-widgets']) {
+    --vaadin-dashboard-widget-background: var(--lumo-contrast-5pct);
+    --vaadin-dashboard-widget-border-color: transparent;
+  }
+}

package/src/components/dashboard-section.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/
+ */
+@media lumo_components_dashboard-section {
+  :host {
+    display: grid;
+    position: relative;
+    grid-template-columns: subgrid;
+    --_section-column: 1 / calc(var(--_effective-col-count) + 1);
+    grid-column: var(--_section-column) !important;
+    gap: var(--_gap, 1rem);
+    /* Dashboard section header height */
+    --_section-header-height: minmax(0, auto);
+    grid-template-rows: var(--_section-header-height) repeat(auto-fill, var(--_row-height));
+    grid-auto-rows: var(--_row-height);
+    --_section-outline-offset: calc(min(var(--_gap), var(--_padding)) / 3);
+    --_focus-ring-offset: calc((var(--_section-outline-offset) - var(--_focus-ring-width)));
+    border-radius: var(--lumo-border-radius-l);
+  }
+
+  :host([hidden]) {
+    display: none !important;
+  }
+
+  ::slotted(*) {
+    --_item-column: span min(var(--vaadin-dashboard-widget-colspan, 1), var(--_effective-col-count, var(--_col-count)));
+
+    grid-column: var(--_item-column);
+    --_item-row: span var(--vaadin-dashboard-widget-rowspan, 1);
+    grid-row: var(--_item-row);
+  }
+
+  header {
+    grid-column: var(--_section-column);
+    margin-bottom: calc(-1 * var(--_section-outline-offset));
+    line-height: var(--lumo-line-height-s);
+    padding-inline: var(--lumo-space-s);
+    min-height: var(--lumo-size-l);
+    align-items: center;
+  }
+
+  :host::before {
+    z-index: 2 !important;
+  }
+
+  ::slotted(vaadin-dashboard-widget-wrapper) {
+    display: contents;
+  }
+
+  [part='title'] {
+    font-size: var(--lumo-font-size-xl);
+    font-weight: 600;
+    white-space: nowrap;
+    line-height: var(--lumo-line-height-m);
+  }
+
+  /* Section states */
+
+  :host([editable]) {
+    outline: 1px solid var(--lumo-contrast-10pct);
+    outline-offset: calc(var(--_section-outline-offset) - 1px);
+    background: var(--lumo-contrast-5pct);
+    box-shadow: 0 0 0 var(--_section-outline-offset) var(--lumo-contrast-5pct);
+  }
+
+  :host([editable]) header {
+    padding-inline: var(--lumo-space-xs);
+  }
+
+  :host([focused])::after {
+    content: '';
+    display: block;
+    position: absolute;
+    inset: 0;
+    border-radius: var(--lumo-border-radius-l);
+    z-index: 9;
+    outline: var(--_focus-ring-width) solid var(--_focus-ring-color);
+    outline-offset: var(--_focus-ring-offset);
+  }
+
+  :host([selected]) {
+    background: var(--lumo-primary-color-10pct);
+    box-shadow: 0 0 0 var(--_section-outline-offset) var(--lumo-primary-color-10pct);
+  }
+
+  :host([selected]:not([focused])) {
+    outline-color: var(--lumo-primary-color-50pct);
+  }
+
+  :host([move-mode]) ::slotted(*) {
+    --_widget-opacity: 0.3;
+    --_widget-filter: blur(10px);
+  }
+
+  :host([dragging]) {
+    background: var(--_drop-target-background-color);
+    outline: var(--_drop-target-border);
+    box-shadow: 0 0 0 var(--_section-outline-offset) var(--_drop-target-background-color);
+  }
+
+  /* Accessible move mode controls */
+
+  [part~='move-backward-button'] {
+    inset-inline-start: calc(-1 * var(--_section-outline-offset));
+  }
+
+  [part~='move-forward-button'] {
+    inset-inline-end: calc(-1 * var(--_section-outline-offset));
+    transform: translateY(-50%);
+  }
+}

package/src/components/dashboard-widget.css

@@ -0,0 +1,224 @@
+/**
+ * @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_dashboard-widget {
+  :host {
+    display: flex;
+    flex-direction: column;
+    grid-column: var(--_item-column);
+    grid-row: var(--_item-row);
+    background: var(--_widget-background);
+    border-radius: var(--_widget-border-radius);
+    box-shadow: var(--_widget-shadow);
+    position: relative;
+  }
+
+  :host::before {
+    content: '';
+    position: absolute;
+    inset: calc(-1 * var(--_widget-border-width));
+    border: var(--_widget-border-width) solid var(--_widget-border-color);
+    border-radius: calc(var(--_widget-border-radius) + var(--_widget-border-width));
+    pointer-events: none;
+  }
+
+  :host([hidden]) {
+    display: none !important;
+  }
+
+  :host(:not([editable])) [part~='resize-button'] {
+    display: none;
+  }
+
+  [part~='content'] {
+    flex: 1;
+    overflow: hidden;
+  }
+
+  /* Widget states */
+
+  :host([editable]) {
+    --vaadin-dashboard-widget-shadow: var(--_widget-editable-shadow);
+    --_widget-border-color: var(--lumo-contrast-20pct);
+    --_widget-border-width: 1px;
+  }
+
+  :host([focused])::before {
+    border-width: var(--_focus-ring-width);
+    border-color: var(--_focus-ring-color);
+  }
+
+  :host([selected]) {
+    --vaadin-dashboard-widget-shadow: var(--_widget-selected-shadow);
+    background: var(--lumo-primary-color-10pct);
+  }
+
+  :host([dragging]) {
+    box-shadow: none;
+    background: var(--_drop-target-background-color);
+    border: var(--_drop-target-border);
+  }
+
+  :host([resizing])::after {
+    content: '';
+    z-index: 2;
+    position: absolute;
+    top: -1px;
+    width: var(--_widget-resizer-width, 0);
+    height: var(--_widget-resizer-height, 0);
+    border-radius: inherit;
+    background: var(--_drop-target-background-color);
+    border: var(--_drop-target-border);
+  }
+
+  /* Widget parts */
+
+  header {
+    min-height: var(--lumo-size-l);
+    padding: var(--lumo-space-xs) var(--lumo-space-m);
+  }
+
+  :host([editable]) header {
+    padding-inline: var(--lumo-space-xs);
+  }
+
+  [part='title'] {
+    font-size: var(--lumo-font-size-l);
+    font-weight: 600;
+  }
+
+  #content {
+    min-height: var(--lumo-size-m);
+    padding-inline: var(--vaadin-dashboard-widget-padding, 0);
+    padding-bottom: var(--vaadin-dashboard-widget-padding, 0);
+    padding-top: 0;
+    border-radius: inherit;
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+    overflow: hidden;
+  }
+
+  ::slotted([slot='header-content']) {
+    align-self: center;
+  }
+
+  :host([resize-mode]) #content,
+  :host([move-mode]) #content {
+    opacity: 0.75;
+    filter: blur(10px);
+  }
+
+  /* Resize handle */
+
+  [part~='resize-button'] {
+    z-index: 1;
+    overflow: hidden;
+    --_resize-button-offset: min(var(--_gap), var(--_padding), var(--lumo-space-xs));
+    position: absolute;
+    bottom: calc(-1 * var(--_resize-button-offset));
+    inset-inline-end: calc(-1 * var(--_resize-button-offset));
+    cursor: nwse-resize;
+    --icon: var(--lumo-icons-resize-handle);
+  }
+
+  :host([dir='rtl']) [part~='resize-button'] {
+    cursor: sw-resize;
+  }
+
+  :host([dir='rtl']) [part~='resize-button'] .icon::before {
+    transform: scaleX(-1);
+  }
+
+  /* Accessible resize mode controls */
+
+  [part~='resize-apply-button'] {
+    --icon: var(--lumo-icons-checkmark);
+    font-size: var(--lumo-icon-size-m);
+  }
+
+  [part~='resize-grow-width-button'],
+  [part~='resize-shrink-width-button'] {
+    padding-right: 0;
+    padding-left: 0;
+    min-width: var(--lumo-size-s);
+  }
+
+  [part~='resize-shrink-width-button'] + [part~='resize-grow-width-button'] {
+    margin-left: 1px;
+  }
+
+  [part~='resize-grow-height-button'],
+  [part~='resize-shrink-height-button'] {
+    height: var(--lumo-size-s);
+    padding-right: 0;
+    padding-left: 0;
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+
+  [part~='resize-shrink-height-button']:not([hidden]) + [part~='resize-grow-height-button'] {
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+  }
+
+  [part~='resize-shrink-height-button'] + [part~='resize-grow-height-button'] {
+    margin-top: 1px;
+  }
+
+  :host(:not([dir='rtl'])) [part~='resize-grow-width-button'],
+  :host(:not([dir='rtl'])) [part~='resize-shrink-width-button'] {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+
+  :host([dir='rtl']) [part~='resize-grow-width-button'],
+  :host([dir='rtl']) [part~='resize-shrink-width-button'] {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+
+  :host(:not([dir='rtl'])) [part~='resize-shrink-width-button']:not([hidden]) + [part~='resize-grow-width-button'] {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+
+  :host([dir='rtl']) [part~='resize-shrink-width-button']:not([hidden]) + [part~='resize-grow-width-button'] {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+
+  [part~='resize-grow-height-button'],
+  [part~='resize-grow-width-button'] {
+    --icon: var(--lumo-icons-plus);
+  }
+
+  [part~='resize-shrink-height-button'],
+  [part~='resize-shrink-width-button'] {
+    --icon: var(--lumo-icons-minus);
+  }
+
+  /* Windows High Contrast Mode */
+  @media (forced-colors: active) {
+    :host {
+      border: 1px solid;
+    }
+
+    :host([focused]) {
+      outline: 2px solid;
+      outline-offset: 1px;
+    }
+
+    :host([selected]) {
+      outline-width: 1px;
+      outline-offset: 0;
+      outline-color: Highlight;
+    }
+
+    :host([selected][focused]) {
+      outline-width: 3px;
+      outline-offset: 0;
+    }
+  }
+}

package/src/components/dashboard.css

@@ -0,0 +1,23 @@
+/**
+ * @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_dashboard {
+  #grid[item-resizing] {
+    -webkit-user-select: none;
+    user-select: none;
+  }
+
+  ::slotted(vaadin-dashboard-widget-wrapper) {
+    display: contents;
+  }
+
+  :host {
+    --_widget-opacity: 1;
+  }
+
+  :host([item-selected]) {
+    --_widget-opacity: 0.7;
+  }
+}