@vaadin/button 25.0.0-alpha10 → 25.0.0-alpha12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/button",
-  "version": "25.0.0-alpha10",
+  "version": "25.0.0-alpha12",
   "publishConfig": {
     "access": "public"
   },
@@ -21,9 +21,6 @@
   "type": "module",
   "files": [
     "src",
-    "!src/styles/*-base-styles.d.ts",
-    "!src/styles/*-base-styles.js",
-    "theme",
     "vaadin-*.d.ts",
     "vaadin-*.js",
     "web-types.json",
@@ -37,23 +34,23 @@
   ],
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
-    "@vaadin/a11y-base": "25.0.0-alpha10",
-    "@vaadin/component-base": "25.0.0-alpha10",
-    "@vaadin/vaadin-lumo-styles": "25.0.0-alpha10",
-    "@vaadin/vaadin-themable-mixin": "25.0.0-alpha10",
+    "@vaadin/a11y-base": "25.0.0-alpha12",
+    "@vaadin/component-base": "25.0.0-alpha12",
+    "@vaadin/vaadin-themable-mixin": "25.0.0-alpha12",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/chai-plugins": "25.0.0-alpha10",
-    "@vaadin/icon": "25.0.0-alpha10",
-    "@vaadin/icons": "25.0.0-alpha10",
-    "@vaadin/test-runner-commands": "25.0.0-alpha10",
+    "@vaadin/chai-plugins": "25.0.0-alpha12",
+    "@vaadin/icon": "25.0.0-alpha12",
+    "@vaadin/icons": "25.0.0-alpha12",
+    "@vaadin/test-runner-commands": "25.0.0-alpha12",
     "@vaadin/testing-helpers": "^2.0.0",
+    "@vaadin/vaadin-lumo-styles": "25.0.0-alpha12",
     "sinon": "^18.0.0"
   },
   "web-types": [
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "6cc6c94079e805fa5b2f0af4dbf3b2a7485e57d0"
+  "gitHead": "e75527348f9ba7c363d068c868b9f030c15b84a1"
 }

package/src/styles/vaadin-button-base-styles.js

@@ -3,7 +3,7 @@
  * Copyright (c) 2017 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import '@vaadin/component-base/src/style-props.js';
+import '@vaadin/component-base/src/styles/style-props.js';
 import { css } from 'lit';
 
 export const buttonStyles = css`

package/src/vaadin-button.js

@@ -10,7 +10,7 @@ import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
 import { TooltipController } from '@vaadin/component-base/src/tooltip-controller.js';
 import { LumoInjectionMixin } from '@vaadin/vaadin-themable-mixin/lumo-injection-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-import { buttonStyles } from './styles/vaadin-button-core-styles.js';
+import { buttonStyles } from './styles/vaadin-button-base-styles.js';
 import { ButtonMixin } from './vaadin-button-mixin.js';
 
 /**

package/vaadin-button.js

@@ -1,3 +1,3 @@
-import './theme/lumo/vaadin-button.js';
+import './src/vaadin-button.js';
 
 export * from './src/vaadin-button.js';

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/button",
-  "version": "25.0.0-alpha10",
+  "version": "25.0.0-alpha12",
   "description-markup": "markdown",
   "contributions": {
     "html": {

package/web-types.lit.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/button",
-  "version": "25.0.0-alpha10",
+  "version": "25.0.0-alpha12",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {

package/src/styles/vaadin-button-core-styles.d.ts

@@ -1,8 +0,0 @@
-/**
- * @license
- * Copyright (c) 2017 - 2025 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-import type { CSSResult } from 'lit';
-
-export const buttonStyles: CSSResult;

package/src/styles/vaadin-button-core-styles.js

@@ -1,72 +0,0 @@
-/**
- * @license
- * Copyright (c) 2017 - 2025 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-import { css } from 'lit';
-
-export const buttonStyles = css`
-  :host {
-    display: inline-block;
-    position: relative;
-    outline: none;
-    white-space: nowrap;
-    -webkit-user-select: none;
-    user-select: none;
-  }
-
-  :host([hidden]) {
-    display: none !important;
-  }
-
-  :host([disabled]) {
-    pointer-events: var(--_vaadin-button-disabled-pointer-events, none);
-    cursor: not-allowed;
-  }
-
-  /* Aligns the button with form fields when placed on the same line.
-  Note, to make it work, the form fields should have the same "::before" pseudo-element. */
-  .vaadin-button-container::before {
-    content: '\\2003';
-    display: inline-block;
-    width: 0;
-    max-height: 100%;
-  }
-
-  .vaadin-button-container {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    text-align: center;
-    width: 100%;
-    height: 100%;
-    min-height: inherit;
-    text-shadow: inherit;
-  }
-
-  [part='prefix'],
-  [part='suffix'] {
-    flex: none;
-  }
-
-  [part='label'] {
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
-  @media (forced-colors: active) {
-    :host {
-      outline: 1px solid;
-      outline-offset: -1px;
-    }
-
-    :host([focused]) {
-      outline-width: 2px;
-    }
-
-    :host([disabled]) {
-      outline-color: GrayText;
-    }
-  }
-`;

package/theme/lumo/vaadin-button-styles.d.ts

@@ -1,7 +0,0 @@
-import '@vaadin/vaadin-lumo-styles/color.js';
-import '@vaadin/vaadin-lumo-styles/sizing.js';
-import '@vaadin/vaadin-lumo-styles/spacing.js';
-import '@vaadin/vaadin-lumo-styles/style.js';
-import '@vaadin/vaadin-lumo-styles/typography.js';
-declare const button: import("lit").CSSResult;
-export { button };

package/theme/lumo/vaadin-button-styles.js

@@ -1,287 +0,0 @@
-import '@vaadin/vaadin-lumo-styles/color.js';
-import '@vaadin/vaadin-lumo-styles/sizing.js';
-import '@vaadin/vaadin-lumo-styles/spacing.js';
-import '@vaadin/vaadin-lumo-styles/style.js';
-import '@vaadin/vaadin-lumo-styles/typography.js';
-import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-
-const button = css`
-  :host {
-    /* Sizing */
-    --lumo-button-size: var(--lumo-size-m);
-    min-width: var(--vaadin-button-min-width, calc(var(--_button-size) * 2));
-    height: var(--_button-size);
-    padding: var(--vaadin-button-padding, 0 calc(var(--_button-size) / 3 + var(--lumo-border-radius-m) / 2));
-    margin: var(--vaadin-button-margin, var(--lumo-space-xs) 0);
-    box-sizing: border-box;
-    /* Style */
-    font-family: var(--lumo-font-family);
-    font-size: var(--vaadin-button-font-size, var(--lumo-font-size-m));
-    font-weight: var(--vaadin-button-font-weight, 500);
-    color: var(--_lumo-button-text-color);
-    background: var(--_lumo-button-background);
-    border: var(--vaadin-button-border, none);
-    border-radius: var(--vaadin-button-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;
-    flex-shrink: 0;
-    --_button-size: var(--vaadin-button-height, var(--lumo-button-size));
-    --_focus-ring-color: var(--vaadin-focus-ring-color, var(--lumo-primary-color-50pct));
-    --_focus-ring-width: var(--vaadin-focus-ring-width, 2px);
-    /* Used by notification */
-    --_lumo-button-background: var(--vaadin-button-background, var(--lumo-contrast-5pct));
-    --_lumo-button-text-color: var(--vaadin-button-text-color, var(--lumo-primary-text-color));
-    --_lumo-button-primary-background: var(--vaadin-button-primary-background, var(--lumo-primary-color));
-    --_lumo-button-primary-text-color: var(--vaadin-button-primary-text-color, var(--lumo-primary-contrast-color));
-  }
-
-  /* Set only for the internal parts so we don't affect the host vertical alignment */
-  [part='label'],
-  [part='prefix'],
-  [part='suffix'] {
-    line-height: var(--lumo-line-height-xs);
-  }
-
-  [part='label'] {
-    padding: calc(var(--lumo-button-size) / 6) 0;
-  }
-
-  :host([theme~='small']) {
-    font-size: var(--lumo-font-size-s);
-    --lumo-button-size: var(--lumo-size-s);
-  }
-
-  :host([theme~='large']) {
-    font-size: var(--lumo-font-size-l);
-    --lumo-button-size: var(--lumo-size-l);
-  }
-
-  /* For interaction states */
-  :host::before,
-  :host::after {
-    content: '';
-    /* We rely on the host always being relative */
-    position: absolute;
-    z-index: 1;
-    inset: 0;
-    background-color: currentColor;
-    border-radius: inherit;
-    opacity: 0;
-    pointer-events: none;
-  }
-
-  /* Hover */
-
-  @media (any-hover: hover) {
-    :host(:not([disabled]):hover)::before {
-      opacity: 0.02;
-    }
-  }
-
-  /* Active */
-
-  :host::after {
-    transition:
-      opacity 1.4s,
-      transform 0.1s;
-    filter: blur(8px);
-  }
-
-  :host([active])::before {
-    opacity: 0.05;
-    transition-duration: 0s;
-  }
-
-  :host([active])::after {
-    opacity: 0.1;
-    transition-duration: 0s, 0s;
-    transform: scale(0);
-  }
-
-  /* Keyboard focus */
-
-  :host([focus-ring]) {
-    box-shadow:
-      0 0 0 calc(1px * var(--_focus-ring-gap-on, 0)) var(--_focus-ring-gap-color, var(--lumo-base-color)),
-      0 0 0 calc(var(--_focus-ring-width) + 1px * var(--_focus-ring-gap-on, 0)) var(--_focus-ring-color);
-  }
-
-  :host([theme~='primary'][focus-ring]) {
-    --_focus-ring-gap-on: 1;
-  }
-
-  /* Types (primary, tertiary, tertiary-inline */
-
-  :host([theme~='tertiary']),
-  :host([theme~='tertiary-inline']) {
-    --_background: transparent !important;
-    background: var(--vaadin-button-tertiary-background, var(--_background));
-    min-width: 0;
-  }
-
-  :host([theme~='tertiary']) {
-    border: var(--vaadin-button-tertiary-border, none);
-    color: var(--vaadin-button-tertiary-text-color, var(--lumo-primary-text-color));
-    font-weight: var(--vaadin-button-tertiary-font-weight, 500);
-    padding: var(--vaadin-button-tertiary-padding, 0 calc(var(--_button-size) / 6));
-  }
-
-  :host([theme~='tertiary-inline'])::before {
-    display: none;
-  }
-
-  :host([theme~='tertiary-inline']) {
-    margin: 0;
-    height: auto;
-    padding: 0;
-    line-height: inherit;
-    font-size: inherit;
-  }
-
-  :host([theme~='tertiary-inline']) [part='label'] {
-    padding: 0;
-    overflow: visible;
-    line-height: inherit;
-  }
-
-  :host([theme~='primary']) {
-    background: var(--_lumo-button-primary-background);
-    border: var(--vaadin-button-primary-border, none);
-    color: var(--_lumo-button-primary-text-color);
-    font-weight: var(--vaadin-button-primary-font-weight, 600);
-    min-width: calc(var(--lumo-button-size) * 2.5);
-  }
-
-  :host([theme~='primary'])::before {
-    background-color: black;
-  }
-
-  @media (any-hover: hover) {
-    :host([theme~='primary']:not([disabled]):hover)::before {
-      opacity: 0.05;
-    }
-  }
-
-  :host([theme~='primary'][active])::before {
-    opacity: 0.1;
-  }
-
-  :host([theme~='primary'][active])::after {
-    opacity: 0.2;
-  }
-
-  /* Colors (success, warning, error, contrast) */
-
-  :host([theme~='success']) {
-    color: var(--lumo-success-text-color);
-  }
-
-  :host([theme~='success'][theme~='primary']) {
-    background-color: var(--lumo-success-color);
-    color: var(--lumo-success-contrast-color);
-  }
-
-  :host([theme~='warning']) {
-    color: var(--lumo-warning-text-color);
-  }
-
-  :host([theme~='warning'][theme~='primary']) {
-    background-color: var(--lumo-warning-color);
-    color: var(--lumo-warning-contrast-color);
-  }
-
-  :host([theme~='error']) {
-    color: var(--lumo-error-text-color);
-  }
-
-  :host([theme~='error'][theme~='primary']) {
-    background-color: var(--lumo-error-color);
-    color: var(--lumo-error-contrast-color);
-  }
-
-  :host([theme~='contrast']) {
-    color: var(--lumo-contrast);
-  }
-
-  :host([theme~='contrast'][theme~='primary']) {
-    background-color: var(--lumo-contrast);
-    color: var(--lumo-base-color);
-  }
-
-  /* Disabled state. Keep selectors after other color variants. */
-
-  :host([disabled]) {
-    color: var(--lumo-disabled-text-color);
-  }
-
-  :host([theme~='primary'][disabled]) {
-    background-color: var(--lumo-contrast-30pct);
-    color: var(--lumo-base-color);
-  }
-
-  :host([theme~='primary'][disabled]) [part] {
-    opacity: 0.7;
-  }
-
-  /* Icons */
-
-  [part] ::slotted(vaadin-icon) {
-    display: inline-block;
-    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 */
-  [part] ::slotted(vaadin-icon[icon^='vaadin:']) {
-    padding: 0.25em;
-    box-sizing: border-box !important;
-  }
-
-  [part='prefix'] {
-    margin-left: -0.25em;
-    margin-right: 0.25em;
-  }
-
-  [part='suffix'] {
-    margin-left: 0.25em;
-    margin-right: -0.25em;
-  }
-
-  /* Icon-only */
-
-  :host([theme~='icon']:not([theme~='tertiary-inline'])) {
-    min-width: var(--lumo-button-size);
-    padding-left: calc(var(--lumo-button-size) / 4);
-    padding-right: calc(var(--lumo-button-size) / 4);
-  }
-
-  :host([theme~='icon']) [part='prefix'],
-  :host([theme~='icon']) [part='suffix'] {
-    margin-left: 0;
-    margin-right: 0;
-  }
-
-  /* RTL specific styles */
-
-  :host([dir='rtl']) [part='prefix'] {
-    margin-left: 0.25em;
-    margin-right: -0.25em;
-  }
-
-  :host([dir='rtl']) [part='suffix'] {
-    margin-left: -0.25em;
-    margin-right: 0.25em;
-  }
-
-  :host([dir='rtl'][theme~='icon']) [part='prefix'],
-  :host([dir='rtl'][theme~='icon']) [part='suffix'] {
-    margin-left: 0;
-    margin-right: 0;
-  }
-`;
-
-registerStyles('vaadin-button', button, { moduleId: 'lumo-button' });
-
-export { button };

package/theme/lumo/vaadin-button.d.ts

@@ -1,2 +0,0 @@
-import './vaadin-button-styles.js';
-import '../../src/vaadin-button.js';

package/theme/lumo/vaadin-button.js

@@ -1,2 +0,0 @@
-import './vaadin-button-styles.js';
-import '../../src/vaadin-button.js';