Big News: Socket raises $60M Series C at a $1B valuation to secure software supply chains for AI-driven development.Announcement →
@vaadin/button
Advanced tools
@vaadin/button - npm Package Compare versions
@@ -96,3 +96,3 @@ { | ||
| "kind": "class", | ||
| "description": "`<vaadin-button>` is an accessible and customizable button that allows users to perform actions.\n\n```html\n<vaadin-button>Press me</vaadin-button>\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n----------|-------------\n`label` | The label (text) inside the button.\n`prefix` | A slot for content before the label (e.g. an icon).\n`suffix` | A slot for content after the label (e.g. an icon).\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n---------------|-------------\n`active` | Set when the button is pressed down, either with mouse, touch or the keyboard\n`disabled` | Set when the button is disabled\n`focus-ring` | Set when the button is focused using the keyboard\n`focused` | Set when the button is focused\n`has-tooltip` | Set when the button has a slotted tooltip\n\nThe following custom CSS properties are available for styling:\n\nCustom CSS property |\n:----------------------------------|\n| `--vaadin-button-background` |\n| `--vaadin-button-border-color` |\n| `--vaadin-button-border-radius` |\n| `--vaadin-button-border-width` |\n| `--vaadin-button-font-size` |\n| `--vaadin-button-font-weight` |\n| `--vaadin-button-gap` |\n| `--vaadin-button-height` |\n| `--vaadin-button-line-height` |\n| `--vaadin-button-margin` |\n| `--vaadin-button-padding` |\n| `--vaadin-button-text-color` |\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.", | ||
| "description": "`<vaadin-button>` is an accessible and customizable button that allows users to perform actions.\n\n```html\n<vaadin-button>Press me</vaadin-button>\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n----------|-------------\n`label` | The label (text) inside the button.\n`prefix` | A slot for content before the label (e.g. an icon).\n`suffix` | A slot for content after the label (e.g. an icon).\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n---------------|-------------\n`active` | Set when the button is pressed down, either with mouse, touch or the keyboard\n`disabled` | Set when the button is disabled\n`focus-ring` | Set when the button is focused using the keyboard\n`focused` | Set when the button is focused\n`has-tooltip` | Set when the button has a slotted tooltip\n\nThe following custom CSS properties are available for styling:\n\nCustom CSS property |\n:----------------------------------|\n| `--vaadin-button-background` |\n| `--vaadin-button-border-color` |\n| `--vaadin-button-border-radius` |\n| `--vaadin-button-border-width` |\n| `--vaadin-button-font-size` |\n| `--vaadin-button-font-weight` |\n| `--vaadin-button-gap` |\n| `--vaadin-button-height` |\n| `--vaadin-button-label-wrap` |\n| `--vaadin-button-line-height` |\n| `--vaadin-button-margin` |\n| `--vaadin-button-padding` |\n| `--vaadin-button-text-color` |\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.", | ||
| "name": "Button", | ||
@@ -99,0 +99,0 @@ "members": [ |
+12
-12
| { | ||
| "name": "@vaadin/button", | ||
| "version": "25.2.0-beta1", | ||
| "version": "25.2.0-beta2", | ||
| "publishConfig": { | ||
@@ -38,16 +38,16 @@ "access": "public" | ||
| "@open-wc/dedupe-mixin": "^1.3.0", | ||
| "@vaadin/a11y-base": "25.2.0-beta1", | ||
| "@vaadin/component-base": "25.2.0-beta1", | ||
| "@vaadin/vaadin-themable-mixin": "25.2.0-beta1", | ||
| "@vaadin/a11y-base": "25.2.0-beta2", | ||
| "@vaadin/component-base": "25.2.0-beta2", | ||
| "@vaadin/vaadin-themable-mixin": "25.2.0-beta2", | ||
| "lit": "^3.0.0" | ||
| }, | ||
| "devDependencies": { | ||
| "@vaadin/aura": "25.2.0-beta1", | ||
| "@vaadin/chai-plugins": "25.2.0-beta1", | ||
| "@vaadin/icon": "25.2.0-beta1", | ||
| "@vaadin/icons": "25.2.0-beta1", | ||
| "@vaadin/test-runner-commands": "25.2.0-beta1", | ||
| "@vaadin/aura": "25.2.0-beta2", | ||
| "@vaadin/chai-plugins": "25.2.0-beta2", | ||
| "@vaadin/icon": "25.2.0-beta2", | ||
| "@vaadin/icons": "25.2.0-beta2", | ||
| "@vaadin/test-runner-commands": "25.2.0-beta2", | ||
| "@vaadin/testing-helpers": "^2.0.0", | ||
| "@vaadin/vaadin-lumo-styles": "25.2.0-beta1", | ||
| "sinon": "^21.0.2" | ||
| "@vaadin/vaadin-lumo-styles": "25.2.0-beta2", | ||
| "sinon": "^22.0.0" | ||
| }, | ||
@@ -59,3 +59,3 @@ "customElements": "custom-elements.json", | ||
| ], | ||
| "gitHead": "471a23f60d1eb725f98a33f62cb9664d9c0a4163" | ||
| "gitHead": "9e18feb8057baf278b72fec4e42657b19e48f499" | ||
| } |
@@ -16,3 +16,3 @@ /** | ||
| gap: var(--vaadin-button-gap, 0 var(--vaadin-gap-s)); | ||
| white-space: nowrap; | ||
| white-space: var(--vaadin-button-label-wrap, normal); | ||
| -webkit-tap-highlight-color: transparent; | ||
@@ -51,3 +51,4 @@ -webkit-user-select: none; | ||
| [part='label'] { | ||
| display: inline-flex; | ||
| overflow: hidden; | ||
| text-overflow: ellipsis; | ||
| } | ||
@@ -54,0 +55,0 @@ |
@@ -49,2 +49,3 @@ /** | ||
| * | `--vaadin-button-height` | | ||
| * | `--vaadin-button-label-wrap` | | ||
| * | `--vaadin-button-line-height` | | ||
@@ -51,0 +52,0 @@ * | `--vaadin-button-margin` | |
@@ -55,2 +55,3 @@ /** | ||
| * | `--vaadin-button-height` | | ||
| * | `--vaadin-button-label-wrap` | | ||
| * | `--vaadin-button-line-height` | | ||
@@ -57,0 +58,0 @@ * | `--vaadin-button-margin` | |
+2
-2
| { | ||
| "$schema": "https://json.schemastore.org/web-types", | ||
| "name": "@vaadin/button", | ||
| "version": "25.2.0-beta1", | ||
| "version": "25.2.0-beta2", | ||
| "description-markup": "markdown", | ||
@@ -11,3 +11,3 @@ "contributions": { | ||
| "name": "vaadin-button", | ||
| "description": "`<vaadin-button>` is an accessible and customizable button that allows users to perform actions.\n\n```html\n<vaadin-button>Press me</vaadin-button>\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n----------|-------------\n`label` | The label (text) inside the button.\n`prefix` | A slot for content before the label (e.g. an icon).\n`suffix` | A slot for content after the label (e.g. an icon).\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n---------------|-------------\n`active` | Set when the button is pressed down, either with mouse, touch or the keyboard\n`disabled` | Set when the button is disabled\n`focus-ring` | Set when the button is focused using the keyboard\n`focused` | Set when the button is focused\n`has-tooltip` | Set when the button has a slotted tooltip\n\nThe following custom CSS properties are available for styling:\n\nCustom CSS property |\n:----------------------------------|\n| `--vaadin-button-background` |\n| `--vaadin-button-border-color` |\n| `--vaadin-button-border-radius` |\n| `--vaadin-button-border-width` |\n| `--vaadin-button-font-size` |\n| `--vaadin-button-font-weight` |\n| `--vaadin-button-gap` |\n| `--vaadin-button-height` |\n| `--vaadin-button-line-height` |\n| `--vaadin-button-margin` |\n| `--vaadin-button-padding` |\n| `--vaadin-button-text-color` |\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.", | ||
| "description": "`<vaadin-button>` is an accessible and customizable button that allows users to perform actions.\n\n```html\n<vaadin-button>Press me</vaadin-button>\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n----------|-------------\n`label` | The label (text) inside the button.\n`prefix` | A slot for content before the label (e.g. an icon).\n`suffix` | A slot for content after the label (e.g. an icon).\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n---------------|-------------\n`active` | Set when the button is pressed down, either with mouse, touch or the keyboard\n`disabled` | Set when the button is disabled\n`focus-ring` | Set when the button is focused using the keyboard\n`focused` | Set when the button is focused\n`has-tooltip` | Set when the button has a slotted tooltip\n\nThe following custom CSS properties are available for styling:\n\nCustom CSS property |\n:----------------------------------|\n| `--vaadin-button-background` |\n| `--vaadin-button-border-color` |\n| `--vaadin-button-border-radius` |\n| `--vaadin-button-border-width` |\n| `--vaadin-button-font-size` |\n| `--vaadin-button-font-weight` |\n| `--vaadin-button-gap` |\n| `--vaadin-button-height` |\n| `--vaadin-button-label-wrap` |\n| `--vaadin-button-line-height` |\n| `--vaadin-button-margin` |\n| `--vaadin-button-padding` |\n| `--vaadin-button-text-color` |\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.", | ||
| "attributes": [ | ||
@@ -14,0 +14,0 @@ { |
| { | ||
| "$schema": "https://json.schemastore.org/web-types", | ||
| "name": "@vaadin/button", | ||
| "version": "25.2.0-beta1", | ||
| "version": "25.2.0-beta2", | ||
| "description-markup": "markdown", | ||
@@ -19,3 +19,3 @@ "framework": "lit", | ||
| "name": "vaadin-button", | ||
| "description": "`<vaadin-button>` is an accessible and customizable button that allows users to perform actions.\n\n```html\n<vaadin-button>Press me</vaadin-button>\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n----------|-------------\n`label` | The label (text) inside the button.\n`prefix` | A slot for content before the label (e.g. an icon).\n`suffix` | A slot for content after the label (e.g. an icon).\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n---------------|-------------\n`active` | Set when the button is pressed down, either with mouse, touch or the keyboard\n`disabled` | Set when the button is disabled\n`focus-ring` | Set when the button is focused using the keyboard\n`focused` | Set when the button is focused\n`has-tooltip` | Set when the button has a slotted tooltip\n\nThe following custom CSS properties are available for styling:\n\nCustom CSS property |\n:----------------------------------|\n| `--vaadin-button-background` |\n| `--vaadin-button-border-color` |\n| `--vaadin-button-border-radius` |\n| `--vaadin-button-border-width` |\n| `--vaadin-button-font-size` |\n| `--vaadin-button-font-weight` |\n| `--vaadin-button-gap` |\n| `--vaadin-button-height` |\n| `--vaadin-button-line-height` |\n| `--vaadin-button-margin` |\n| `--vaadin-button-padding` |\n| `--vaadin-button-text-color` |\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.", | ||
| "description": "`<vaadin-button>` is an accessible and customizable button that allows users to perform actions.\n\n```html\n<vaadin-button>Press me</vaadin-button>\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n----------|-------------\n`label` | The label (text) inside the button.\n`prefix` | A slot for content before the label (e.g. an icon).\n`suffix` | A slot for content after the label (e.g. an icon).\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n---------------|-------------\n`active` | Set when the button is pressed down, either with mouse, touch or the keyboard\n`disabled` | Set when the button is disabled\n`focus-ring` | Set when the button is focused using the keyboard\n`focused` | Set when the button is focused\n`has-tooltip` | Set when the button has a slotted tooltip\n\nThe following custom CSS properties are available for styling:\n\nCustom CSS property |\n:----------------------------------|\n| `--vaadin-button-background` |\n| `--vaadin-button-border-color` |\n| `--vaadin-button-border-radius` |\n| `--vaadin-button-border-width` |\n| `--vaadin-button-font-size` |\n| `--vaadin-button-font-weight` |\n| `--vaadin-button-gap` |\n| `--vaadin-button-height` |\n| `--vaadin-button-label-wrap` |\n| `--vaadin-button-line-height` |\n| `--vaadin-button-margin` |\n| `--vaadin-button-padding` |\n| `--vaadin-button-text-color` |\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.", | ||
| "extension": true, | ||
@@ -22,0 +22,0 @@ "attributes": [ |
New alerts
Long strings
Supply chain riskContains long string literals, which may be a sign of obfuscated or packed code.
Found 1 instance in 1 package
Fixed alerts
Long strings
Supply chain riskContains long string literals, which may be a sign of obfuscated or packed code.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
42995
0.59%- Lines of code
692
0.44%Dependency changes
+ Added
@vaadin/a11y-base@25.2.0-beta2(transitive)+ Added
@vaadin/component-base@25.2.0-beta2(transitive)+ Added
@vaadin/vaadin-themable-mixin@25.2.0-beta2(transitive)- Removed
@vaadin/a11y-base@25.2.0-beta1(transitive)- Removed
@vaadin/component-base@25.2.0-beta1(transitive)- Removed
@vaadin/vaadin-themable-mixin@25.2.0-beta1(transitive)