@vaadin/multi-select-combo-box 24.0.5 → 24.1.0-alpha10

package/README.md

@@ -13,7 +13,7 @@ A web component that wraps `<vaadin-combo-box>` and allows selecting multiple it
 </script>
 ```
 
-[<img src="https://raw.githubusercontent.com/vaadin/web-components/master/packages/multi-select-combo-box/screenshot.png" width="300" alt="Screenshot of vaadin-multi-select-combo-box">](https://vaadin.com/docs/latest/components/multi-select-combo-box)
+[<img src="https://raw.githubusercontent.com/vaadin/web-components/main/packages/multi-select-combo-box/screenshot.png" width="300" alt="Screenshot of vaadin-multi-select-combo-box">](https://vaadin.com/docs/latest/components/multi-select-combo-box)
 
 ## Installation
 
@@ -32,7 +32,7 @@ import '@vaadin/multi-select-combo-box';
 ## Themes
 
 Vaadin components come with two built-in [themes](https://vaadin.com/docs/latest/styling), Lumo and Material.
-The [main entrypoint](https://github.com/vaadin/web-components/blob/master/packages/multi-select-combo-box/vaadin-multi-select-combo-box.js) of the package uses the Lumo theme.
+The [main entrypoint](https://github.com/vaadin/web-components/blob/main/packages/multi-select-combo-box/vaadin-multi-select-combo-box.js) of the package uses the Lumo theme.
 
 To use the Material theme, import the component from the `theme/material` folder:
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/multi-select-combo-box",
-  "version": "24.0.5",
+  "version": "24.1.0-alpha10",
   "publishConfig": {
     "access": "public"
   },
@@ -37,16 +37,17 @@
   ],
   "dependencies": {
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/combo-box": "~24.0.5",
-    "@vaadin/component-base": "~24.0.5",
-    "@vaadin/field-base": "~24.0.5",
-    "@vaadin/input-container": "~24.0.5",
-    "@vaadin/item": "~24.0.5",
-    "@vaadin/lit-renderer": "~24.0.5",
-    "@vaadin/overlay": "~24.0.5",
-    "@vaadin/vaadin-lumo-styles": "~24.0.5",
-    "@vaadin/vaadin-material-styles": "~24.0.5",
-    "@vaadin/vaadin-themable-mixin": "~24.0.5"
+    "@vaadin/a11y-base": "24.1.0-alpha10",
+    "@vaadin/combo-box": "24.1.0-alpha10",
+    "@vaadin/component-base": "24.1.0-alpha10",
+    "@vaadin/field-base": "24.1.0-alpha10",
+    "@vaadin/input-container": "24.1.0-alpha10",
+    "@vaadin/item": "24.1.0-alpha10",
+    "@vaadin/lit-renderer": "24.1.0-alpha10",
+    "@vaadin/overlay": "24.1.0-alpha10",
+    "@vaadin/vaadin-lumo-styles": "24.1.0-alpha10",
+    "@vaadin/vaadin-material-styles": "24.1.0-alpha10",
+    "@vaadin/vaadin-themable-mixin": "24.1.0-alpha10"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
@@ -58,5 +59,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "e384c1b5c02e01a4382a433f727d075de9a4ee97"
+  "gitHead": "12e39be7eb3b49c68708e8ca3de2fb22e91051a1"
 }

package/src/vaadin-multi-select-combo-box-chip.js

@@ -70,6 +70,13 @@ class MultiSelectComboBoxChip extends ThemableMixin(PolymerElement) {
         :host(:is([readonly], [disabled], [slot='overflow'])) [part='remove-button'] {
           display: none !important;
         }
+
+        @media (forced-colors: active) {
+          :host {
+            outline: 1px solid;
+            outline-offset: -1px;
+          }
+        }
       </style>
       <div part="label">[[label]]</div>
       <div part="remove-button" role="button" on-click="_onRemoveClick"></div>

package/src/vaadin-multi-select-combo-box.d.ts

@@ -3,18 +3,18 @@
  * Copyright (c) 2021 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
+import type { DelegateFocusMixinClass } from '@vaadin/a11y-base/src/delegate-focus-mixin.js';
+import type { DisabledMixinClass } from '@vaadin/a11y-base/src/disabled-mixin.js';
+import type { FocusMixinClass } from '@vaadin/a11y-base/src/focus-mixin.js';
+import type { KeyboardMixinClass } from '@vaadin/a11y-base/src/keyboard-mixin.js';
 import type {
   ComboBoxDataProvider,
   ComboBoxDefaultItem,
   ComboBoxItemModel,
 } from '@vaadin/combo-box/src/vaadin-combo-box.js';
 import type { ControllerMixinClass } from '@vaadin/component-base/src/controller-mixin.js';
-import type { DelegateFocusMixinClass } from '@vaadin/component-base/src/delegate-focus-mixin.js';
 import type { DelegateStateMixinClass } from '@vaadin/component-base/src/delegate-state-mixin.js';
-import type { DisabledMixinClass } from '@vaadin/component-base/src/disabled-mixin.js';
 import type { ElementMixinClass } from '@vaadin/component-base/src/element-mixin.js';
-import type { FocusMixinClass } from '@vaadin/component-base/src/focus-mixin.js';
-import type { KeyboardMixinClass } from '@vaadin/component-base/src/keyboard-mixin.js';
 import type { ResizeMixinClass } from '@vaadin/component-base/src/resize-mixin.js';
 import type { ClearButtonMixinClass } from '@vaadin/field-base/src/clear-button-mixin.js';
 import type { FieldMixinClass } from '@vaadin/field-base/src/field-mixin.js';

package/src/vaadin-multi-select-combo-box.js

@@ -7,7 +7,7 @@ import './vaadin-multi-select-combo-box-chip.js';
 import './vaadin-multi-select-combo-box-container.js';
 import './vaadin-multi-select-combo-box-internal.js';
 import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
-import { announce } from '@vaadin/component-base/src/a11y-announcer.js';
+import { announce } from '@vaadin/a11y-base/src/announce.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
 import { ResizeMixin } from '@vaadin/component-base/src/resize-mixin.js';
 import { SlotController } from '@vaadin/component-base/src/slot-controller.js';
@@ -479,6 +479,7 @@ class MultiSelectComboBox extends ResizeMixin(InputControlMixin(ThemableMixin(El
       `
         ${tag}[has-value] input::placeholder {
           color: transparent !important;
+          forced-color-adjust: none;
         }
       `,
     ];

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/multi-select-combo-box",
-  "version": "24.0.5",
+  "version": "24.1.0-alpha10",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -87,6 +87,28 @@
                 ]
               }
             },
+            {
+              "name": "accessible-name",
+              "description": "String used to label the component to screen reader users.",
+              "value": {
+                "type": [
+                  "string",
+                  "null",
+                  "undefined"
+                ]
+              }
+            },
+            {
+              "name": "accessible-name-ref",
+              "description": "Id of the element used as label of the component to screen reader users.",
+              "value": {
+                "type": [
+                  "string",
+                  "null",
+                  "undefined"
+                ]
+              }
+            },
             {
               "name": "value",
               "description": "The value of the field.",
@@ -387,6 +409,28 @@
                   ]
                 }
               },
+              {
+                "name": "accessibleName",
+                "description": "String used to label the component to screen reader users.",
+                "value": {
+                  "type": [
+                    "string",
+                    "null",
+                    "undefined"
+                  ]
+                }
+              },
+              {
+                "name": "accessibleNameRef",
+                "description": "Id of the element used as label of the component to screen reader users.",
+                "value": {
+                  "type": [
+                    "string",
+                    "null",
+                    "undefined"
+                  ]
+                }
+              },
               {
                 "name": "clearButtonVisible",
                 "description": "Set to true to display the clear icon which clears the input.",

package/web-types.lit.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/multi-select-combo-box",
-  "version": "24.0.5",
+  "version": "24.1.0-alpha10",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {
@@ -117,6 +117,20 @@
                 "kind": "expression"
               }
             },
+            {
+              "name": ".accessibleName",
+              "description": "String used to label the component to screen reader users.",
+              "value": {
+                "kind": "expression"
+              }
+            },
+            {
+              "name": ".accessibleNameRef",
+              "description": "Id of the element used as label of the component to screen reader users.",
+              "value": {
+                "kind": "expression"
+              }
+            },
             {
               "name": ".allowedCharPattern",
               "description": "A pattern matched against individual characters the user inputs.\n\nWhen set, the field will prevent:\n- `keydown` events if the entered key doesn't match `/^allowedCharPattern$/`\n- `paste` events if the pasted text doesn't match `/^allowedCharPattern*$/`\n- `drop` events if the dropped text doesn't match `/^allowedCharPattern*$/`\n\nFor example, to allow entering only numbers and minus signs, use:\n`allowedCharPattern = \"[\\\\d-]\"`",