@vaadin/checkbox 24.0.5 → 24.1.0-alpha10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/README.md +2 -2
  2. package/package.json +8 -7
  3. package/src/vaadin-checkbox-mixin.d.ts +5 -5
  4. package/src/vaadin-checkbox-mixin.js +2 -2
  5. package/src/vaadin-checkbox-styles.js +26 -0
  6. package/src/vaadin-checkbox.d.ts +2 -2
  7. package/theme/lumo/vaadin-checkbox-styles.js +10 -1
  8. package/web-types.json +1 -1
  9. package/web-types.lit.json +1 -1
package/README.md CHANGED
@@ -13,7 +13,7 @@ An input field representing a binary choice.
13
13
  <vaadin-checkbox label="Indeterminate" indeterminate></vaadin-checkbox>
14
14
  ```
15
15
 
16
- [<img src="https://raw.githubusercontent.com/vaadin/web-components/master/packages/checkbox/screenshot.png" width="400" alt="Screenshot of vaadin-checkbox">](https://vaadin.com/docs/latest/components/checkbox)
16
+ [<img src="https://raw.githubusercontent.com/vaadin/web-components/main/packages/checkbox/screenshot.png" width="400" alt="Screenshot of vaadin-checkbox">](https://vaadin.com/docs/latest/components/checkbox)
17
17
 
18
18
  ## Installation
19
19
 
@@ -32,7 +32,7 @@ import '@vaadin/checkbox';
32
32
  ## Themes
33
33
 
34
34
  Vaadin components come with two built-in [themes](https://vaadin.com/docs/latest/styling), Lumo and Material.
35
- The [main entrypoint](https://github.com/vaadin/web-components/blob/master/packages/checkbox/vaadin-checkbox.js) of the package uses the Lumo theme.
35
+ The [main entrypoint](https://github.com/vaadin/web-components/blob/main/packages/checkbox/vaadin-checkbox.js) of the package uses the Lumo theme.
36
36
 
37
37
  To use the Material theme, import the component from the `theme/material` folder:
38
38
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vaadin/checkbox",
3
- "version": "24.0.5",
3
+ "version": "24.1.0-alpha10",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },
@@ -39,11 +39,12 @@
39
39
  "dependencies": {
40
40
  "@open-wc/dedupe-mixin": "^1.3.0",
41
41
  "@polymer/polymer": "^3.0.0",
42
- "@vaadin/component-base": "~24.0.5",
43
- "@vaadin/field-base": "~24.0.5",
44
- "@vaadin/vaadin-lumo-styles": "~24.0.5",
45
- "@vaadin/vaadin-material-styles": "~24.0.5",
46
- "@vaadin/vaadin-themable-mixin": "~24.0.5",
42
+ "@vaadin/a11y-base": "24.1.0-alpha10",
43
+ "@vaadin/component-base": "24.1.0-alpha10",
44
+ "@vaadin/field-base": "24.1.0-alpha10",
45
+ "@vaadin/vaadin-lumo-styles": "24.1.0-alpha10",
46
+ "@vaadin/vaadin-material-styles": "24.1.0-alpha10",
47
+ "@vaadin/vaadin-themable-mixin": "24.1.0-alpha10",
47
48
  "lit": "^2.0.0"
48
49
  },
49
50
  "devDependencies": {
@@ -55,5 +56,5 @@
55
56
  "web-types.json",
56
57
  "web-types.lit.json"
57
58
  ],
58
- "gitHead": "e384c1b5c02e01a4382a433f727d075de9a4ee97"
59
+ "gitHead": "12e39be7eb3b49c68708e8ca3de2fb22e91051a1"
59
60
  }
package/src/vaadin-checkbox-mixin.d.ts CHANGED
@@ -4,13 +4,13 @@
4
4
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
5
5
  */
6
6
  import type { Constructor } from '@open-wc/dedupe-mixin';
7
- import type { ActiveMixinClass } from '@vaadin/component-base/src/active-mixin.js';
7
+ import type { ActiveMixinClass } from '@vaadin/a11y-base/src/active-mixin.js';
8
+ import type { DelegateFocusMixinClass } from '@vaadin/a11y-base/src/delegate-focus-mixin.js';
9
+ import type { DisabledMixinClass } from '@vaadin/a11y-base/src/disabled-mixin.js';
10
+ import type { FocusMixinClass } from '@vaadin/a11y-base/src/focus-mixin.js';
11
+ import type { KeyboardMixinClass } from '@vaadin/a11y-base/src/keyboard-mixin.js';
8
12
  import type { ControllerMixinClass } from '@vaadin/component-base/src/controller-mixin.js';
9
- import type { DelegateFocusMixinClass } from '@vaadin/component-base/src/delegate-focus-mixin.js';
10
13
  import type { DelegateStateMixinClass } from '@vaadin/component-base/src/delegate-state-mixin.js';
11
- import type { DisabledMixinClass } from '@vaadin/component-base/src/disabled-mixin.js';
12
- import type { FocusMixinClass } from '@vaadin/component-base/src/focus-mixin.js';
13
- import type { KeyboardMixinClass } from '@vaadin/component-base/src/keyboard-mixin.js';
14
14
  import type { CheckedMixinClass } from '@vaadin/field-base/src/checked-mixin.js';
15
15
  import type { InputMixinClass } from '@vaadin/field-base/src/input-mixin.js';
16
16
  import type { LabelMixinClass } from '@vaadin/field-base/src/label-mixin.js';
package/src/vaadin-checkbox-mixin.js CHANGED
@@ -3,8 +3,8 @@
3
3
  * Copyright (c) 2017 - 2023 Vaadin Ltd.
4
4
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
5
5
  */
6
- import { ActiveMixin } from '@vaadin/component-base/src/active-mixin.js';
7
- import { DelegateFocusMixin } from '@vaadin/component-base/src/delegate-focus-mixin.js';
6
+ import { ActiveMixin } from '@vaadin/a11y-base/src/active-mixin.js';
7
+ import { DelegateFocusMixin } from '@vaadin/a11y-base/src/delegate-focus-mixin.js';
8
8
  import { CheckedMixin } from '@vaadin/field-base/src/checked-mixin.js';
9
9
  import { InputController } from '@vaadin/field-base/src/input-controller.js';
10
10
  import { LabelMixin } from '@vaadin/field-base/src/label-mixin.js';
package/src/vaadin-checkbox-styles.js CHANGED
@@ -38,6 +38,9 @@ export const checkboxStyles = css`
38
38
  [part='checkbox'] {
39
39
  width: var(--vaadin-checkbox-size, 1em);
40
40
  height: var(--vaadin-checkbox-size, 1em);
41
+ --_input-border-width: var(--vaadin-input-field-border-width, 0);
42
+ --_input-border-color: var(--vaadin-input-field-border-color, transparent);
43
+ box-shadow: inset 0 0 0 var(--_input-border-width, 0) var(--_input-border-color);
41
44
  }
42
45
 
43
46
  [part='checkbox']::before {
@@ -55,4 +58,27 @@ export const checkboxStyles = css`
55
58
  align-self: stretch;
56
59
  -webkit-appearance: none;
57
60
  }
61
+
62
+ @media (forced-colors: active) {
63
+ [part='checkbox'] {
64
+ outline: 1px solid;
65
+ outline-offset: -1px;
66
+ }
67
+
68
+ :host([disabled]) [part='checkbox'],
69
+ :host([disabled]) [part='checkbox']::after {
70
+ outline-color: GrayText;
71
+ }
72
+
73
+ :host(:is([checked], [indeterminate])) [part='checkbox']::after {
74
+ outline: 1px solid;
75
+ outline-offset: -1px;
76
+ border-radius: inherit;
77
+ }
78
+
79
+ :host([focused]) [part='checkbox'],
80
+ :host([focused]) [part='checkbox']::after {
81
+ outline-width: 2px;
82
+ }
83
+ }
58
84
  `;
package/src/vaadin-checkbox.d.ts CHANGED
@@ -3,9 +3,9 @@
3
3
  * Copyright (c) 2017 - 2023 Vaadin Ltd.
4
4
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
5
5
  */
6
- import { ActiveMixin } from '@vaadin/component-base/src/active-mixin.js';
6
+ import { ActiveMixin } from '@vaadin/a11y-base/src/active-mixin.js';
7
+ import { DelegateFocusMixin } from '@vaadin/a11y-base/src/delegate-focus-mixin.js';
7
8
  import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
8
- import { DelegateFocusMixin } from '@vaadin/component-base/src/delegate-focus-mixin.js';
9
9
  import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
10
10
  import { CheckedMixin } from '@vaadin/field-base/src/checked-mixin.js';
11
11
  import { LabelMixin } from '@vaadin/field-base/src/label-mixin.js';
package/theme/lumo/vaadin-checkbox-styles.js CHANGED
@@ -39,6 +39,13 @@ registerStyles(
39
39
  background-color: var(--lumo-contrast-20pct);
40
40
  transition: transform 0.2s cubic-bezier(0.12, 0.32, 0.54, 2), background-color 0.15s;
41
41
  cursor: var(--lumo-clickable-cursor);
42
+ /* Default field border color */
43
+ --_input-border-color: var(--vaadin-input-field-border-color, var(--lumo-contrast-50pct));
44
+ }
45
+
46
+ :host([indeterminate]),
47
+ :host([checked]) {
48
+ --vaadin-input-field-border-color: transparent;
42
49
  }
43
50
 
44
51
  :host([indeterminate]) [part='checkbox'],
@@ -80,13 +87,15 @@ registerStyles(
80
87
 
81
88
  /* Focus ring */
82
89
  :host([focus-ring]) [part='checkbox'] {
83
- box-shadow: 0 0 0 1px var(--lumo-base-color), 0 0 0 3px var(--lumo-primary-color-50pct);
90
+ box-shadow: 0 0 0 1px var(--lumo-base-color), 0 0 0 3px var(--lumo-primary-color-50pct),
91
+ inset 0 0 0 var(--_input-border-width, 0) var(--_input-border-color);
84
92
  }
85
93
 
86
94
  /* Disabled */
87
95
  :host([disabled]) {
88
96
  pointer-events: none;
89
97
  color: var(--lumo-disabled-text-color);
98
+ --vaadin-input-field-border-color: var(--lumo-contrast-20pct);
90
99
  }
91
100
 
92
101
  :host([disabled]) ::slotted(label) {
package/web-types.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "$schema": "https://json.schemastore.org/web-types",
3
3
  "name": "@vaadin/checkbox",
4
- "version": "24.0.5",
4
+ "version": "24.1.0-alpha10",
5
5
  "description-markup": "markdown",
6
6
  "contributions": {
7
7
  "html": {
package/web-types.lit.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "$schema": "https://json.schemastore.org/web-types",
3
3
  "name": "@vaadin/checkbox",
4
- "version": "24.0.5",
4
+ "version": "24.1.0-alpha10",
5
5
  "description-markup": "markdown",
6
6
  "framework": "lit",
7
7
  "framework-config": {