@vaadin/checkbox - npm Package Compare versions

Comparing version 24.4.0-dev.b3e1d14600 to 24.4.0-rc1

package.json

 {
   "name": "@vaadin/checkbox",
-  "version": "24.4.0-dev.b3e1d14600",
+  "version": "24.4.0-rc1",
   "publishConfig": {
@@ -40,8 +40,8 @@ "access": "public"
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/a11y-base": "24.4.0-dev.b3e1d14600",
-    "@vaadin/component-base": "24.4.0-dev.b3e1d14600",
-    "@vaadin/field-base": "24.4.0-dev.b3e1d14600",
-    "@vaadin/vaadin-lumo-styles": "24.4.0-dev.b3e1d14600",
-    "@vaadin/vaadin-material-styles": "24.4.0-dev.b3e1d14600",
-    "@vaadin/vaadin-themable-mixin": "24.4.0-dev.b3e1d14600",
+    "@vaadin/a11y-base": "24.4.0-rc1",
+    "@vaadin/component-base": "24.4.0-rc1",
+    "@vaadin/field-base": "24.4.0-rc1",
+    "@vaadin/vaadin-lumo-styles": "24.4.0-rc1",
+    "@vaadin/vaadin-material-styles": "24.4.0-rc1",
+    "@vaadin/vaadin-themable-mixin": "24.4.0-rc1",
     "lit": "^3.0.0"
@@ -58,3 +58,3 @@ },
   ],
-  "gitHead": "502d4f5b03f770a83d270d98078cde230254dd0e"
+  "gitHead": "a81e3b927d44c56613fa4e1307494a2acc81005f"
 }

README.md

@@ -8,3 +8,2 @@ # @vaadin/checkbox
 [![npm version](https://badgen.net/npm/v/@vaadin/checkbox)](https://www.npmjs.com/package/@vaadin/checkbox)
-[![Discord](https://img.shields.io/discord/732335336448852018?label=discord)](https://discord.gg/PHmkCKC)
 
@@ -11,0 +10,0 @@ ```html

src/vaadin-checkbox-mixin.d.ts

 /**
  * @license
- * Copyright (c) 2021 - 2023 Vaadin Ltd.
+ * Copyright (c) 2021 - 2024 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
@@ -15,4 +15,6 @@ */
 import type { CheckedMixinClass } from '@vaadin/field-base/src/checked-mixin.js';
+import type { FieldMixinClass } from '@vaadin/field-base/src/field-mixin.js';
 import type { InputMixinClass } from '@vaadin/field-base/src/input-mixin.js';
 import type { LabelMixinClass } from '@vaadin/field-base/src/label-mixin.js';
+import type { ValidateMixinClass } from '@vaadin/field-base/src/validate-mixin.js';
 
@@ -31,2 +33,3 @@ /**
   Constructor<DisabledMixinClass> &
+  Constructor<FieldMixinClass> &
   Constructor<FocusMixinClass> &
@@ -36,2 +39,3 @@ Constructor<InputMixinClass> &
   Constructor<LabelMixinClass> &
+  Constructor<ValidateMixinClass> &
   T;
@@ -53,2 +57,10 @@
   name: string;
+
+  /**
+   * When true, the user cannot modify the value of the checkbox.
+   * The difference between `disabled` and `readonly` is that the
+   * read-only checkbox remains focusable, is announced by screen
+   * readers and its value can be submitted as part of the form.
+   */
+  readonly: boolean;
 }

src/vaadin-checkbox-mixin.js

 /**
  * @license
- * Copyright (c) 2017 - 2023 Vaadin Ltd.
+ * Copyright (c) 2017 - 2024 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
@@ -9,4 +9,4 @@ */
 import { CheckedMixin } from '@vaadin/field-base/src/checked-mixin.js';
+import { FieldMixin } from '@vaadin/field-base/src/field-mixin.js';
 import { InputController } from '@vaadin/field-base/src/input-controller.js';
-import { LabelMixin } from '@vaadin/field-base/src/label-mixin.js';
 import { LabelledInputController } from '@vaadin/field-base/src/labelled-input-controller.js';
@@ -21,6 +21,6 @@
  * @mixes DelegateFocusMixin
- * @mixes LabelMixin
+ * @mixes FieldMixin
  */
 export const CheckboxMixin = (superclass) =>
-  class CheckboxMixinClass extends LabelMixin(CheckedMixin(DelegateFocusMixin(ActiveMixin(superclass)))) {
+  class CheckboxMixinClass extends FieldMixin(CheckedMixin(DelegateFocusMixin(ActiveMixin(superclass)))) {
     static get properties() {
@@ -55,2 +55,14 @@ return {
         /**
+         * When true, the user cannot modify the value of the checkbox.
+         * The difference between `disabled` and `readonly` is that the
+         * read-only checkbox remains focusable, is announced by screen
+         * readers and its value can be submitted as part of the form.
+         */
+        readonly: {
+          type: Boolean,
+          value: false,
+          reflectToAttribute: true,
+        },
+
+        /**
          * Indicates whether the element can be focused and where it participates in sequential keyboard navigation.
@@ -69,2 +81,6 @@ *
 
+    static get observers() {
+      return ['__readonlyChanged(readonly, inputElement)'];
+    }
+
     /** @override */
@@ -77,3 +93,3 @@ static get delegateProps() {
     static get delegateAttrs() {
-      return [...super.delegateAttrs, 'name'];
+      return [...super.delegateAttrs, 'name', 'invalid'];
     }
@@ -86,2 +102,4 @@
 
+      this._boundOnInputClick = this._onInputClick.bind(this);
+
       // Set the string "on" as the default value for the checkbox following the HTML specification:
@@ -105,7 +123,10 @@ // https://html.spec.whatwg.org/multipage/input.html#dom-input-value-default-on
       this.addController(new LabelledInputController(this.inputElement, this._labelController));
+
+      this._createMethodObserver('_checkedChanged(checked)');
     }
 
     /**
-     * Override method inherited from `ActiveMixin` to prevent setting
-     * `active` attribute when clicking a link placed inside the label.
+     * Override method inherited from `ActiveMixin` to prevent setting `active`
+     * attribute when readonly, or when clicking a link placed inside the label,
+     * or when clicking slotted helper or error message element.
      *
@@ -118,3 +139,8 @@ * @param {Event} event
     _shouldSetActive(event) {
-      if (event.target.localName === 'a') {
+      if (
+        this.readonly ||
+        event.target.localName === 'a' ||
+        event.target === this._helperNode ||
+        event.target === this._errorNode
+      ) {
         return false;
@@ -127,2 +153,48 @@ }
     /**
+     * Override method inherited from `InputMixin`.
+     * @param {!HTMLElement} input
+     * @protected
+     * @override
+     */
+    _addInputListeners(input) {
+      super._addInputListeners(input);
+
+      input.addEventListener('click', this._boundOnInputClick);
+    }
+
+    /**
+     * Override method inherited from `InputMixin`.
+     * @param {!HTMLElement} input
+     * @protected
+     * @override
+     */
+    _removeInputListeners(input) {
+      super._removeInputListeners(input);
+
+      input.removeEventListener('click', this._boundOnInputClick);
+    }
+
+    /** @private */
+    _onInputClick(event) {
+      // Prevent native checkbox checked change
+      if (this.readonly) {
+        event.preventDefault();
+      }
+    }
+
+    /** @private */
+    __readonlyChanged(readonly, inputElement) {
+      if (!inputElement) {
+        return;
+      }
+
+      // Use aria-readonly since native checkbox doesn't support readonly
+      if (readonly) {
+        inputElement.setAttribute('aria-readonly', 'true');
+      } else {
+        inputElement.removeAttribute('aria-readonly');
+      }
+    }
+
+    /**
      * Override method inherited from `CheckedMixin` to reset
@@ -144,2 +216,54 @@ * `indeterminate` state checkbox is toggled by the user.
     /**
+     * @override
+     * @return {boolean}
+     */
+    checkValidity() {
+      return !this.required || !!this.checked;
+    }
+
+    /**
+     * Override method inherited from `FocusMixin` to validate on blur.
+     * @param {boolean} focused
+     * @protected
+     */
+    _setFocused(focused) {
+      super._setFocused(focused);
+
+      // Do not validate when focusout is caused by document
+      // losing focus, which happens on browser tab switch.
+      if (!focused && document.hasFocus()) {
+        this.validate();
+      }
+    }
+
+    /** @private */
+    _checkedChanged(checked) {
+      if (checked || this.__oldChecked) {
+        this.validate();
+      }
+
+      this.__oldChecked = checked;
+    }
+
+    /**
+     * Override an observer from `FieldMixin`
+     * to validate when required is removed.
+     *
+     * @protected
+     * @override
+     */
+    _requiredChanged(required) {
+      super._requiredChanged(required);
+
+      if (required === false) {
+        this.validate();
+      }
+    }
+
+    /** @private */
+    _onRequiredIndicatorClick() {
+      this._labelNode.click();
+    }
+
+    /**
      * Fired when the checkbox is checked or unchecked by the user.
@@ -146,0 +270,0 @@ *

src/vaadin-checkbox-styles.d.ts

 /**
  * @license
- * Copyright (c) 2017 - 2023 Vaadin Ltd.
+ * Copyright (c) 2017 - 2024 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
@@ -5,0 +5,0 @@ */

src/vaadin-checkbox-styles.js

 /**
  * @license
- * Copyright (c) 2017 - 2023 Vaadin Ltd.
+ * Copyright (c) 2017 - 2024 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
@@ -29,3 +29,3 @@ */
   ::slotted(input),
-  ::slotted(label) {
+  [part='label'] {
     grid-row: 1;
@@ -39,2 +39,12 @@ }
 
+  [part='helper-text'],
+  [part='error-message'] {
+    grid-column: 2;
+  }
+
+  :host(:not([has-helper])) [part='helper-text'],
+  :host(:not([has-error-message])) [part='error-message'] {
+    display: none;
+  }
+
   [part='checkbox'] {
@@ -41,0 +51,0 @@ width: var(--vaadin-checkbox-size, 1em);

src/vaadin-checkbox.d.ts

 /**
  * @license
- * Copyright (c) 2017 - 2023 Vaadin Ltd.
+ * Copyright (c) 2017 - 2024 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { ActiveMixin } from '@vaadin/a11y-base/src/active-mixin.js';
-import { DelegateFocusMixin } from '@vaadin/a11y-base/src/delegate-focus-mixin.js';
-import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
-import { CheckedMixin } from '@vaadin/field-base/src/checked-mixin.js';
-import { LabelMixin } from '@vaadin/field-base/src/label-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { CheckboxMixin } from './vaadin-checkbox-mixin.js';
 
@@ -31,2 +27,12 @@ /**
 
+/**
+ * Fired when the `invalid` property changes.
+ */
+export type CheckboxInvalidChangedEvent = CustomEvent<{ value: boolean }>;
+
+/**
+ * Fired whenever the checkbox is validated.
+ */
+export type CheckboxValidatedEvent = CustomEvent<{ valid: boolean }>;
+
 export interface CheckboxCustomEventMap {
@@ -36,2 +42,6 @@ 'checked-changed': CheckboxCheckedChangedEvent;
   'indeterminate-changed': CheckboxIndeterminateChangedEvent;
+
+  'invalid-changed': CheckboxInvalidChangedEvent;
+
+  validated: CheckboxValidatedEvent;
 }
@@ -54,17 +64,25 @@
  *
- * Part name   | Description
- * ------------|-------------
- * `checkbox`  | The element representing a stylable custom checkbox.
+ * Part name            | Description
+ * ---------------------|-------------
+ * `checkbox`           | The element representing a stylable custom checkbox
+ * `label`              | The slotted label element wrapper
+ * `helper-text`        | The slotted helper text element wrapper
+ * `error-message`      | The slotted error message element wrapper
+ * `required-indicator` | The `required` state indicator element
  *
  * The following state attributes are available for styling:
  *
- * Attribute       | Description
- * ----------------|-------------
- * `active`        | Set when the checkbox is activated with mouse, touch or the keyboard.
- * `checked`       | Set when the checkbox is checked.
- * `disabled`      | Set when the checkbox is disabled.
- * `focus-ring`    | Set when the checkbox is focused using the keyboard.
- * `focused`       | Set when the checkbox is focused.
- * `indeterminate` | Set when the checkbox is in the indeterminate state.
- * `has-label`     | Set when the checkbox has a label.
+ * Attribute            | Description
+ * ---------------------|-------------
+ * `active`             | Set when the checkbox is activated with mouse, touch or the keyboard.
+ * `checked`            | Set when the checkbox is checked.
+ * `disabled`           | Set when the checkbox is disabled.
+ * `readonly`           | Set when the checkbox is readonly.
+ * `focus-ring`         | Set when the checkbox is focused using the keyboard.
+ * `focused`            | Set when the checkbox is focused.
+ * `indeterminate`      | Set when the checkbox is in the indeterminate state.
+ * `invalid`            | Set when the checkbox is invalid.
+ * `has-label`          | Set when the checkbox has a label.
+ * `has-helper`         | Set when the checkbox has helper text.
+ * `has-error-message`  | Set when the checkbox has an error message.
  *
@@ -77,19 +95,3 @@ * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
  */
-declare class Checkbox extends LabelMixin(
-  CheckedMixin(DelegateFocusMixin(ActiveMixin(ElementMixin(ThemableMixin(ControllerMixin(HTMLElement)))))),
-) {
-  /**
-   * True if the checkbox is in the indeterminate state which means
-   * it is not possible to say whether it is checked or unchecked.
-   * The state is reset once the user switches the checkbox by hand.
-   *
-   * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#Indeterminate_state_checkboxes
-   */
-  indeterminate: boolean;
-
-  /**
-   * The name of the checkbox.
-   */
-  name: string;
-
+declare class Checkbox extends CheckboxMixin(ElementMixin(ThemableMixin(HTMLElement))) {
   addEventListener<K extends keyof CheckboxEventMap>(
@@ -96,0 +98,0 @@ type: K,

src/vaadin-checkbox.js

 /**
  * @license
- * Copyright (c) 2017 - 2023 Vaadin Ltd.
+ * Copyright (c) 2017 - 2024 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
@@ -27,17 +27,25 @@ */
  *
- * Part name   | Description
- * ------------|-------------
- * `checkbox`  | The element representing a stylable custom checkbox.
+ * Part name            | Description
+ * ---------------------|-------------
+ * `checkbox`           | The element representing a stylable custom checkbox
+ * `label`              | The slotted label element wrapper
+ * `helper-text`        | The slotted helper text element wrapper
+ * `error-message`      | The slotted error message element wrapper
+ * `required-indicator` | The `required` state indicator element
  *
  * The following state attributes are available for styling:
  *
- * Attribute       | Description
- * ----------------|-------------
- * `active`        | Set when the checkbox is activated with mouse, touch or the keyboard.
- * `checked`       | Set when the checkbox is checked.
- * `disabled`      | Set when the checkbox is disabled.
- * `focus-ring`    | Set when the checkbox is focused using the keyboard.
- * `focused`       | Set when the checkbox is focused.
- * `indeterminate` | Set when the checkbox is in the indeterminate state.
- * `has-label`     | Set when the checkbox has a label.
+ * Attribute            | Description
+ * ---------------------|-------------
+ * `active`             | Set when the checkbox is activated with mouse, touch or the keyboard.
+ * `checked`            | Set when the checkbox is checked.
+ * `disabled`           | Set when the checkbox is disabled.
+ * `readonly`           | Set when the checkbox is readonly.
+ * `focus-ring`         | Set when the checkbox is focused using the keyboard.
+ * `focused`            | Set when the checkbox is focused.
+ * `indeterminate`      | Set when the checkbox is in the indeterminate state.
+ * `invalid`            | Set when the checkbox is invalid.
+ * `has-label`          | Set when the checkbox has a label.
+ * `has-helper`         | Set when the checkbox has helper text.
+ * `has-error-message`  | Set when the checkbox has an error message.
  *
@@ -66,3 +74,12 @@ * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
         <slot name="input"></slot>
-        <slot name="label"></slot>
+        <div part="label">
+          <slot name="label"></slot>
+          <div part="required-indicator" on-click="_onRequiredIndicatorClick"></div>
+        </div>
+        <div part="helper-text">
+          <slot name="helper"></slot>
+        </div>
+        <div part="error-message">
+          <slot name="error-message"></slot>
+        </div>
       </div>
@@ -69,0 +86,0 @@ <slot name="tooltip"></slot>

src/vaadin-lit-checkbox.d.ts

 /**
  * @license
- * Copyright (c) 2017 - 2023 Vaadin Ltd.
+ * Copyright (c) 2017 - 2024 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 export * from './vaadin-checkbox.js';

src/vaadin-lit-checkbox.js

 /**
  * @license
- * Copyright (c) 2017 - 2023 Vaadin Ltd.
+ * Copyright (c) 2017 - 2024 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
@@ -20,3 +20,3 @@ */
  *
- * This component is an experiment not intended for publishing to npm.
+ * This component is an experiment and not yet a part of Vaadin platform.
  * There is no ETA regarding specific Vaadin version where it'll land.
@@ -40,3 +40,12 @@ * Feel free to try this code in your apps as per Apache 2.0 license.
         <slot name="input"></slot>
-        <slot name="label"></slot>
+        <div part="label">
+          <slot name="label"></slot>
+          <div part="required-indicator" @click="${this._onRequiredIndicatorClick}"></div>
+        </div>
+        <div part="helper-text">
+          <slot name="helper"></slot>
+        </div>
+        <div part="error-message">
+          <slot name="error-message"></slot>
+        </div>
       </div>
@@ -43,0 +52,0 @@ <slot name="tooltip"></slot>

theme/lumo/vaadin-checkbox-styles.js

@@ -29,4 +29,11 @@ import '@vaadin/vaadin-lumo-styles/color.js';
       --_selection-color: var(--vaadin-selection-color, var(--lumo-primary-color));
+      --_invalid-background: var(--vaadin-input-field-invalid-background, var(--lumo-error-color-10pct));
     }
 
+    [part='label'] {
+      display: flex;
+      position: relative;
+      max-width: max-content;
+    }
+
     :host([has-label]) ::slotted(label) {
@@ -39,2 +46,10 @@ padding: var(
 
+    :host([dir='rtl'][has-label]) ::slotted(label) {
+      padding: var(--lumo-space-xs) var(--lumo-space-xs) var(--lumo-space-xs) var(--lumo-space-s);
+    }
+
+    :host([has-label][required]) ::slotted(label) {
+      padding-inline-end: var(--lumo-space-m);
+    }
+
     [part='checkbox'] {
@@ -82,2 +97,23 @@ width: var(--_checkbox-size);
 
+    :host([readonly]:not([checked]):not([indeterminate])) {
+      color: var(--lumo-secondary-text-color);
+    }
+
+    :host([readonly]:not([checked]):not([indeterminate])) [part='checkbox'] {
+      background: transparent;
+      box-shadow: none;
+    }
+
+    :host([readonly]:not([checked]):not([indeterminate])) [part='checkbox']::after {
+      content: '';
+      box-sizing: border-box;
+      width: 100%;
+      height: 100%;
+      border-radius: inherit;
+      top: 0;
+      left: 0;
+      opacity: 1;
+      border: var(--vaadin-input-field-readonly-border, 1px dashed var(--lumo-contrast-50pct));
+    }
+
     /* Indeterminate checkmark */
@@ -102,6 +138,9 @@ :host([indeterminate]) [part='checkbox']::after {
 
+    :host([focus-ring][readonly]:not([checked]):not([indeterminate])) [part='checkbox'] {
+      box-shadow: 0 0 0 1px var(--lumo-base-color), 0 0 0 calc(var(--_focus-ring-width) + 1px) var(--_focus-ring-color);
+    }
+
     /* Disabled */
     :host([disabled]) {
       pointer-events: none;
-      color: var(--lumo-disabled-text-color);
       --vaadin-input-field-border-color: var(--lumo-contrast-20pct);
@@ -122,2 +161,8 @@ }
 
+    :host([disabled]) [part='label'],
+    :host([disabled]) [part='helper-text'] {
+      color: var(--lumo-disabled-text-color);
+      -webkit-text-fill-color: var(--lumo-disabled-text-color);
+    }
+
     :host([indeterminate][disabled]) [part='checkbox']::after {
@@ -127,5 +172,5 @@ background-color: var(--lumo-contrast-30pct);
 
-    /* RTL specific styles */
-    :host([dir='rtl'][has-label]) ::slotted(label) {
-      padding: var(--lumo-space-xs) var(--lumo-space-xs) var(--lumo-space-xs) var(--lumo-space-s);
+    :host([readonly][checked]) [part='checkbox'],
+    :host([readonly][indeterminate]) [part='checkbox'] {
+      background-color: var(--vaadin-checkbox-readonly-checked-background, var(--lumo-contrast-70pct));
     }
@@ -148,3 +193,3 @@
     /* Hover */
-    :host(:not([checked]):not([indeterminate]):not([disabled]):hover) [part='checkbox'] {
+    :host(:not([checked]):not([indeterminate]):not([disabled]):not([readonly]):not([invalid]):hover) [part='checkbox'] {
       background: var(--vaadin-checkbox-background-hover, var(--lumo-contrast-30pct));
@@ -155,3 +200,4 @@ }
     @media (pointer: coarse) {
-      :host(:not([checked]):not([indeterminate]):not([disabled]):hover) [part='checkbox'] {
+      /* prettier-ignore */
+      :host(:not([checked]):not([indeterminate]):not([disabled]):not([readonly]):not([invalid]):hover) [part='checkbox'] {
         background: var(--vaadin-checkbox-background, var(--lumo-contrast-20pct));
@@ -176,4 +222,92 @@ }
     }
+
+    /* Required */
+    :host([required]) [part='required-indicator'] {
+      position: absolute;
+      top: var(--lumo-space-xs);
+      right: var(--lumo-space-xs);
+    }
+
+    :host([required][dir='rtl']) [part='required-indicator'] {
+      right: auto;
+      left: var(--lumo-space-xs);
+    }
+
+    :host([required]) [part='required-indicator']::after {
+      content: var(--lumo-required-field-indicator, '\\2022');
+      transition: opacity 0.2s;
+      color: var(--lumo-required-field-indicator-color, var(--lumo-primary-text-color));
+      width: 1em;
+      text-align: center;
+    }
+
+    /* Invalid */
+    :host([invalid]) {
+      --vaadin-input-field-border-color: var(--lumo-error-color);
+    }
+
+    :host([invalid]) [part='checkbox'] {
+      background: var(--_invalid-background);
+      background-image: linear-gradient(var(--_invalid-background) 0%, var(--_invalid-background) 100%);
+    }
+
+    :host([invalid]:hover) [part='checkbox'] {
+      background-image: linear-gradient(var(--_invalid-background) 0%, var(--_invalid-background) 100%),
+        linear-gradient(var(--_invalid-background) 0%, var(--_invalid-background) 100%);
+    }
+
+    :host([invalid][focus-ring]) {
+      --_focus-ring-color: var(--lumo-error-color-50pct);
+    }
+
+    :host([invalid]) [part='required-indicator']::after {
+      color: var(--lumo-required-field-indicator-color, var(--lumo-error-text-color));
+    }
+
+    /* Error message */
+    [part='error-message'] {
+      font-size: var(--vaadin-input-field-error-font-size, var(--lumo-font-size-xs));
+      line-height: var(--lumo-line-height-xs);
+      font-weight: var(--vaadin-input-field-error-font-weight, 400);
+      color: var(--vaadin-input-field-error-color, var(--lumo-error-text-color));
+      will-change: max-height;
+      transition: 0.4s max-height;
+      max-height: 5em;
+      padding-inline-start: var(--lumo-space-xs);
+    }
+
+    :host([has-error-message]) [part='error-message']::after,
+    :host([has-helper]) [part='helper-text']::after {
+      content: '';
+      display: block;
+      height: 0.4em;
+    }
+
+    :host(:not([invalid])) [part='error-message'] {
+      max-height: 0;
+      overflow: hidden;
+    }
+
+    /* Helper */
+    [part='helper-text'] {
+      display: block;
+      color: var(--vaadin-input-field-helper-color, var(--lumo-secondary-text-color));
+      font-size: var(--vaadin-input-field-helper-font-size, var(--lumo-font-size-xs));
+      line-height: var(--lumo-line-height-xs);
+      font-weight: var(--vaadin-input-field-helper-font-weight, 400);
+      margin-left: calc(var(--lumo-border-radius-m) / 4);
+      transition: color 0.2s;
+      padding-inline-start: var(--lumo-space-xs);
+    }
+
+    :host(:hover:not([readonly])) [part='helper-text'] {
+      color: var(--lumo-body-text-color);
+    }
+
+    :host([has-error-message]) ::slotted(label),
+    :host([has-helper]) ::slotted(label) {
+      padding-bottom: 0;
+    }
   `,
   { moduleId: 'lumo-checkbox' },
 );

theme/material/vaadin-checkbox-styles.js

@@ -18,2 +18,8 @@ import '@vaadin/vaadin-material-styles/color.js';
 
+    [part='label'] {
+      display: flex;
+      position: relative;
+      max-width: max-content;
+    }
+
     :host([has-label]) ::slotted(label) {
@@ -122,2 +128,8 @@ padding: 3px 12px 3px 6px;
 
+    :host([readonly][checked]) [part='checkbox'],
+    :host([readonly][indeterminate]) [part='checkbox'],
+    :host([readonly]) [part='checkbox']::before {
+      background-color: var(--material-secondary-text-color);
+    }
+
     /* RTL specific styles */
@@ -127,4 +139,50 @@ :host([dir='rtl'][has-label]) ::slotted(label) {
     }
+
+    /* Required */
+    :host([required]) [part='required-indicator'] {
+      position: absolute;
+      top: 3px;
+      right: 2px;
+    }
+
+    :host([dir='rtl'][required]) [part='required-indicator'] {
+      right: auto;
+      left: 2px;
+    }
+
+    :host([required]:not([disabled])) [part='required-indicator'] {
+      color: var(--material-secondary-text-color);
+    }
+
+    :host([required]) [part='required-indicator']::after {
+      content: '*';
+    }
+
+    :host([invalid]) [part='required-indicator']::after {
+      color: var(--material-error-text-color);
+    }
+
+    [part='error-message'],
+    [part='helper-text'] {
+      font-size: 0.75em;
+      line-height: 1;
+      padding-left: 6px;
+    }
+
+    [part='error-message'] {
+      color: var(--material-error-text-color);
+    }
+
+    [part='helper-text'] {
+      color: var(--material-secondary-text-color);
+    }
+
+    :host([has-error-message]) [part='error-message']::before,
+    :host([has-helper]) [part='helper-text']::before {
+      content: '';
+      display: block;
+      height: 6px;
+    }
   `,
   { moduleId: 'material-checkbox' },
 );

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

72411

increased by77.13%

Number of package files

29

increased by38.1%

Lines of code

1610

increased by113.81%

Worsened metrics

Number of lines in readme file

64

decreased by-1.54%

Dependency changes

• + Added@vaadin/a11y-base@24.4.0-rc1(transitive)

• + Added@vaadin/component-base@24.4.0-rc1(transitive)

• + Added@vaadin/field-base@24.4.0-rc1(transitive)

• + Added@vaadin/icon@24.4.0-rc1(transitive)

• + Added@vaadin/vaadin-lumo-styles@24.4.0-rc1(transitive)

• + Added@vaadin/vaadin-material-styles@24.4.0-rc1(transitive)

• + Added@vaadin/vaadin-themable-mixin@24.4.0-rc1(transitive)

• - Removed@vaadin/a11y-base@24.4.0-dev.b3e1d14600(transitive)

• - Removed@vaadin/component-base@24.4.0-dev.b3e1d14600(transitive)

• - Removed@vaadin/field-base@24.4.0-dev.b3e1d14600(transitive)

• - Removed@vaadin/icon@24.4.0-dev.b3e1d14600(transitive)

• - Removed@vaadin/vaadin-lumo-styles@24.4.0-dev.b3e1d14600(transitive)

• - Removed@vaadin/vaadin-material-styles@24.4.0-dev.b3e1d14600(transitive)

• - Removed@vaadin/vaadin-themable-mixin@24.4.0-dev.b3e1d14600(transitive)

• Updated@vaadin/a11y-base@24.4.0-rc1

• Updated@vaadin/component-base@24.4.0-rc1

• Updated@vaadin/field-base@24.4.0-rc1

• Updated@vaadin/vaadin-lumo-styles@24.4.0-rc1

• Updated@vaadin/vaadin-material-styles@24.4.0-rc1

• Updated@vaadin/vaadin-themable-mixin@24.4.0-rc1