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

package/src/components/side-nav-item.css

@@ -0,0 +1,170 @@
+/**
+ * @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_side-nav-item {
+  :host {
+    display: block;
+    --_focus-ring-color: var(--vaadin-focus-ring-color, var(--lumo-primary-color-50pct));
+    --_focus-ring-width: var(--vaadin-focus-ring-width, 2px);
+  }
+
+  :host([hidden]),
+  [hidden] {
+    display: none !important;
+  }
+
+  :host([disabled]) {
+    pointer-events: none;
+  }
+
+  [part='content'] {
+    display: flex;
+    align-items: center;
+  }
+
+  [part='link'] {
+    flex: auto;
+    min-width: 0;
+    display: flex;
+    align-items: center;
+    text-decoration: none;
+    color: inherit;
+    font: inherit;
+    width: 100%;
+    gap: var(--lumo-space-xs);
+    padding: var(--lumo-space-s);
+    padding-inline-start: calc(var(--lumo-space-s) + var(--_child-indent, 0px));
+    border-radius: var(--lumo-border-radius-m);
+    transition:
+      background-color 140ms,
+      color 140ms;
+    cursor: var(--lumo-clickable-cursor, default);
+    min-height: var(--lumo-icon-size-m);
+  }
+
+  button {
+    appearance: none;
+    flex: none;
+    position: relative;
+    margin: 0;
+    padding: 0;
+    border: 0;
+    background: transparent;
+  }
+
+  [part='children'] {
+    padding: 0;
+    margin: 0;
+    list-style-type: none;
+  }
+
+  :host(:not([has-children])) button {
+    display: none !important;
+  }
+
+  slot[name='prefix'],
+  slot[name='suffix'] {
+    flex: none;
+  }
+
+  slot:not([name]) {
+    display: block;
+    flex: auto;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    margin: 0 var(--lumo-space-s);
+  }
+
+  [part='link'][href] {
+    cursor: pointer;
+  }
+
+  :host([disabled]) [part='link'] {
+    color: var(--lumo-disabled-text-color);
+  }
+
+  [part='toggle-button'] {
+    margin-inline-end: calc(var(--lumo-space-xs) * -1);
+    width: var(--lumo-size-s);
+    height: var(--lumo-size-s);
+  }
+
+  :host([has-children]) [part='content'] {
+    padding-inline-end: var(--lumo-space-s);
+  }
+
+  @media (any-hover: hover) {
+    [part='link']:hover {
+      color: var(--lumo-header-text-color);
+    }
+
+    [part='toggle-button']:hover {
+      color: var(--lumo-body-text-color);
+    }
+  }
+
+  [part='link']:active:focus {
+    background-color: var(--lumo-contrast-5pct);
+  }
+
+  [part='toggle-button']::before {
+    content: var(--lumo-icons-dropdown);
+    transform: rotate(-90deg);
+    transition: transform 140ms;
+  }
+
+  :host([dir='rtl']) [part='toggle-button']::before {
+    transform: rotate(90deg);
+  }
+
+  :host([expanded]) [part='toggle-button']::before {
+    transform: none;
+  }
+
+  [part='link'],
+  [part='toggle-button'] {
+    outline: none;
+  }
+
+  [part='link']:focus-visible,
+  [part='toggle-button']:focus-visible {
+    border-radius: var(--lumo-border-radius-m);
+    box-shadow: 0 0 0 var(--_focus-ring-width) var(--_focus-ring-color);
+  }
+
+  [part='link']:active {
+    color: var(--lumo-header-text-color);
+  }
+
+  slot[name='prefix']::slotted(:is(vaadin-icon, [class*='icon'])) {
+    padding: 0.1em;
+    flex-shrink: 0;
+    color: var(--lumo-contrast-60pct);
+  }
+
+  :host([disabled]) slot[name='prefix']::slotted(:is(vaadin-icon, [class*='icon'])) {
+    color: var(--lumo-disabled-text-color);
+  }
+
+  :host([current]) slot[name='prefix']::slotted(:is(vaadin-icon, [class*='icon'])) {
+    color: inherit;
+  }
+
+  slot[name='children'] {
+    --_child-indent: calc(var(--_child-indent-2, 0px) + var(--vaadin-side-nav-child-indent, var(--lumo-space-l)));
+  }
+
+  slot[name='children']::slotted(*) {
+    --_child-indent-2: var(--_child-indent);
+  }
+
+  :host([current]) [part='content'] {
+    background-color: var(--lumo-primary-color-10pct);
+    color: var(--vaadin-selection-color-text, var(--lumo-primary-text-color));
+    border-radius: var(--lumo-border-radius-m);
+  }
+}

package/src/components/side-nav.css

@@ -0,0 +1,102 @@
+/**
+ * @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_side-nav {
+  :host {
+    display: block;
+    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-body-text-color);
+    -webkit-tap-highlight-color: transparent;
+    --_focus-ring-color: var(--vaadin-focus-ring-color, var(--lumo-primary-color-50pct));
+    --_focus-ring-width: var(--vaadin-focus-ring-width, 2px);
+  }
+
+  :host([hidden]) {
+    display: none !important;
+  }
+
+  button {
+    display: flex;
+    align-items: center;
+    justify-content: inherit;
+    width: 100%;
+    margin: 0;
+    padding: 0;
+    background-color: initial;
+    color: inherit;
+    border: initial;
+    outline: none;
+    font: inherit;
+    text-align: inherit;
+  }
+
+  [part='children'] {
+    padding: 0;
+    margin: 0;
+    list-style-type: none;
+  }
+
+  [part='label'] {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    outline: none;
+    box-sizing: border-box;
+    border-radius: var(--lumo-border-radius-m);
+    font-family: var(--lumo-font-family);
+    font-size: var(--lumo-font-size-s);
+    font-weight: 500;
+    line-height: var(--lumo-line-height-xs);
+  }
+
+  [part='label'] ::slotted([slot='label']) {
+    color: var(--lumo-secondary-text-color);
+    margin: var(--lumo-space-s);
+  }
+
+  :host([focus-ring]) [part='label'] {
+    box-shadow: 0 0 0 var(--_focus-ring-width) var(--_focus-ring-color);
+  }
+
+  [part='toggle-button'] {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--lumo-size-s);
+    height: var(--lumo-size-s);
+    margin-inline: auto var(--lumo-space-xs);
+    font-size: var(--lumo-icon-size-m);
+    line-height: 1;
+    color: var(--lumo-contrast-60pct);
+    font-family: 'lumo-icons';
+    cursor: var(--lumo-clickable-cursor);
+  }
+
+  [part='toggle-button']::before {
+    content: var(--lumo-icons-angle-right);
+    transition: transform 140ms;
+  }
+
+  :host(:not([collapsible])) [part='toggle-button'] {
+    display: none !important;
+  }
+
+  :host(:not([collapsed])) [part='toggle-button']::before {
+    transform: rotate(90deg);
+  }
+
+  :host([collapsed][dir='rtl']) [part='toggle-button']::before {
+    transform: rotate(180deg);
+  }
+
+  @media (any-hover: hover) {
+    [part='label']:hover [part='toggle-button'] {
+      color: var(--lumo-body-text-color);
+    }
+  }
+}

package/src/components/split-layout.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_split-layout {
+  :host {
+    display: flex;
+    overflow: hidden !important;
+  }
+
+  :host([hidden]) {
+    display: none !important;
+  }
+
+  :host([orientation='vertical']) {
+    flex-direction: column;
+  }
+
+  :host ::slotted(*) {
+    flex: 1 1 auto;
+    overflow: auto;
+  }
+
+  [part='splitter'] {
+    flex: none;
+    position: relative;
+    z-index: 1;
+    overflow: visible;
+    min-width: var(--lumo-space-s);
+    min-height: var(--lumo-space-s);
+    background-color: var(--lumo-contrast-5pct);
+    transition: 0.1s background-color;
+  }
+
+  :host(:not([orientation='vertical'])) > [part='splitter'] {
+    cursor: ew-resize;
+  }
+
+  :host([orientation='vertical']) > [part='splitter'] {
+    cursor: ns-resize;
+  }
+
+  [part='handle'] {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate3d(-50%, -50%, 0);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--lumo-size-m);
+    height: var(--lumo-size-m);
+  }
+
+  [part='handle']::after {
+    content: '';
+    display: block;
+    --_handle-size: 4px;
+    width: var(--_handle-size);
+    height: 100%;
+    max-width: 100%;
+    max-height: 100%;
+    border-radius: var(--lumo-border-radius-s);
+    background-color: var(--lumo-contrast-30pct);
+    transition:
+      0.1s opacity,
+      0.1s background-color;
+  }
+
+  :host([orientation='vertical']) [part='handle']::after {
+    width: 100%;
+    height: var(--_handle-size);
+  }
+
+  /* Active style */
+  [part='splitter']:active [part='handle']::after {
+    background-color: var(--lumo-contrast-50pct);
+  }
+
+  /* Small/minimal */
+  :host([theme~='small']) > [part='splitter'] {
+    border-left: 1px solid var(--lumo-contrast-10pct);
+    border-top: 1px solid var(--lumo-contrast-10pct);
+  }
+
+  :host(:is([theme~='small'], [theme~='minimal'])) > [part='splitter'] {
+    min-width: 0;
+    min-height: 0;
+    background-color: transparent;
+  }
+
+  :host(:is([theme~='small'], [theme~='minimal'])) > [part='splitter']::after {
+    content: '';
+    position: absolute;
+    inset: -4px;
+  }
+
+  :host(:is([theme~='small'], [theme~='minimal'])) > [part='splitter'] > [part='handle'] {
+    left: calc(50% - 0.5px);
+    top: calc(50% - 0.5px);
+  }
+
+  :host(:is([theme~='small'], [theme~='minimal'])) > [part='splitter'] > [part='handle']::after {
+    opacity: 0;
+    --_handle-size: 5px;
+  }
+
+  :host(:is([theme~='small'], [theme~='minimal'])) > [part='splitter']:hover > [part='handle']::after,
+  :host(:is([theme~='small'], [theme~='minimal'])) > [part='splitter']:active > [part='handle']::after {
+    opacity: 1;
+  }
+
+  /* Hover style */
+  @media (any-hover: hover) {
+    [part='splitter']:hover [part='handle']::after {
+      background-color: var(--lumo-contrast-40pct);
+    }
+  }
+
+  @media (forced-colors: active) {
+    [part~='splitter'] {
+      outline: 1px solid;
+    }
+
+    [part~='handle']::after {
+      background-color: AccentColor !important;
+      forced-color-adjust: none;
+    }
+  }
+}

package/src/components/tab.css

@@ -0,0 +1,246 @@
+/**
+ * @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_tab {
+  :host {
+    box-sizing: border-box;
+    padding: 0.5rem 0.75rem;
+    font-family: var(--lumo-font-family);
+    font-size: var(--lumo-font-size-m);
+    line-height: var(--lumo-line-height-xs);
+    font-weight: 500;
+    opacity: 1;
+    color: var(--lumo-secondary-text-color);
+    transition:
+      0.15s color,
+      0.2s transform;
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    position: relative;
+    cursor: var(--lumo-clickable-cursor);
+    transform-origin: 50% 100%;
+    outline: none;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    overflow: hidden;
+    min-width: var(--lumo-size-m);
+    -webkit-user-select: none;
+    user-select: none;
+    --_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));
+  }
+
+  :host([hidden]) {
+    display: none !important;
+  }
+
+  :host(:not([orientation='vertical'])) {
+    text-align: center;
+  }
+
+  :host([orientation='vertical']) {
+    transform-origin: 0% 50%;
+    padding: 0.25rem 1rem;
+    min-height: var(--lumo-size-m);
+    min-width: 0;
+  }
+
+  :host(:hover),
+  :host([focus-ring]) {
+    color: var(--lumo-body-text-color);
+  }
+
+  :host([selected]) {
+    color: var(--_selection-color-text);
+    transition: 0.6s color;
+  }
+
+  :host([active]:not([selected])) {
+    color: var(--_selection-color-text);
+    transition-duration: 0.1s;
+  }
+
+  :host::before,
+  :host::after {
+    content: '';
+    position: absolute;
+    display: var(--_lumo-tab-marker-display, block);
+    bottom: 0;
+    left: 50%;
+    width: var(--lumo-size-s);
+    height: 2px;
+    background-color: var(--lumo-contrast-60pct);
+    border-radius: var(--lumo-border-radius-s) var(--lumo-border-radius-s) 0 0;
+    transform: translateX(-50%) scale(0);
+    transform-origin: 50% 100%;
+    transition: 0.14s transform cubic-bezier(0.12, 0.32, 0.54, 1);
+    will-change: transform;
+  }
+
+  :host([orientation='vertical'])::before,
+  :host([orientation='vertical'])::after {
+    left: 0;
+    bottom: 50%;
+    transform: translateY(50%) scale(0);
+    width: 2px;
+    height: var(--lumo-size-xs);
+    border-radius: 0 var(--lumo-border-radius-s) var(--lumo-border-radius-s) 0;
+    transform-origin: 100% 50%;
+  }
+
+  :host::after {
+    box-shadow: 0 0 0 4px var(--_selection-color);
+    opacity: 0.15;
+    transition:
+      0.15s 0.02s transform,
+      0.8s 0.17s opacity;
+  }
+
+  :host([selected])::before,
+  :host([selected])::after {
+    background-color: var(--_selection-color);
+    transform: translateX(-50%) scale(1);
+    transition-timing-function: cubic-bezier(0.12, 0.32, 0.54, 1.5);
+  }
+
+  :host([orientation='vertical'][selected])::before,
+  :host([orientation='vertical'][selected])::after {
+    transform: translateY(50%) scale(1);
+  }
+
+  :host([selected]:not([active]))::after {
+    opacity: 0;
+  }
+
+  :host(:not([orientation='vertical'])) ::slotted(a[href]) {
+    justify-content: center;
+  }
+
+  :host ::slotted(a) {
+    display: flex;
+    width: 100%;
+    align-items: center;
+    height: 100%;
+    margin: -0.5rem -0.75rem;
+    padding: 0.5rem 0.75rem;
+    outline: none;
+
+    /*
+    Override the CSS inherited from `lumo-color` and `lumo-typography`.
+    Note: `!important` is needed because of the `:slotted` specificity.
+  */
+    text-decoration: none !important;
+    color: inherit !important;
+  }
+
+  :host ::slotted(vaadin-icon) {
+    margin: 0 4px;
+    width: var(--lumo-icon-size-m);
+    height: var(--lumo-icon-size-m);
+  }
+
+  /* Vaadin icons are based on a 16x16 grid (unlike Lumo and Material icons with 24x24), so they look too big by default */
+  :host ::slotted(vaadin-icon[icon^='vaadin:']) {
+    padding: 0.25rem;
+    box-sizing: border-box !important;
+  }
+
+  :host(:not([dir='rtl'])) ::slotted(vaadin-icon:first-child) {
+    margin-left: 0;
+  }
+
+  :host(:not([dir='rtl'])) ::slotted(vaadin-icon:last-child) {
+    margin-right: 0;
+  }
+
+  :host([theme~='icon-on-top']) {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-around;
+    text-align: center;
+    padding-bottom: 0.5rem;
+    padding-top: 0.25rem;
+  }
+
+  :host([theme~='icon-on-top']) ::slotted(a) {
+    flex-direction: column;
+    align-items: center;
+    margin-top: -0.25rem;
+    padding-top: 0.25rem;
+  }
+
+  :host([theme~='icon-on-top']) ::slotted(vaadin-icon) {
+    margin: 0;
+  }
+
+  /* Disabled */
+
+  :host([disabled]) {
+    pointer-events: none;
+    opacity: 1;
+    color: var(--lumo-disabled-text-color);
+  }
+
+  /* Focus-ring */
+
+  :host([focus-ring]) {
+    box-shadow: inset 0 0 0 var(--_focus-ring-width) var(--_focus-ring-color);
+    border-radius: var(--lumo-border-radius-m);
+  }
+
+  /* RTL specific styles */
+
+  :host([dir='rtl'])::before,
+  :host([dir='rtl'])::after {
+    left: auto;
+    right: 50%;
+    transform: translateX(50%) scale(0);
+  }
+
+  :host([dir='rtl'][selected]:not([orientation='vertical']))::before,
+  :host([dir='rtl'][selected]:not([orientation='vertical']))::after {
+    transform: translateX(50%) scale(1);
+  }
+
+  :host([dir='rtl']) ::slotted(vaadin-icon:first-child) {
+    margin-right: 0;
+  }
+
+  :host([dir='rtl']) ::slotted(vaadin-icon:last-child) {
+    margin-left: 0;
+  }
+
+  :host([orientation='vertical'][dir='rtl']) {
+    transform-origin: 100% 50%;
+  }
+
+  :host([dir='rtl'][orientation='vertical'])::before,
+  :host([dir='rtl'][orientation='vertical'])::after {
+    left: auto;
+    right: 0;
+    border-radius: var(--lumo-border-radius-s) 0 0 var(--lumo-border-radius-s);
+    transform-origin: 0% 50%;
+  }
+
+  @media (forced-colors: active) {
+    :host([focused]) {
+      outline: 1px solid;
+      outline-offset: -1px;
+    }
+
+    :host([selected]) {
+      border-bottom: 2px solid;
+    }
+
+    :host([orientation='vertical'][selected]) {
+      border-bottom: none;
+      border-left: 2px solid;
+    }
+  }
+}