@vaadin/scroller 23.0.0-alpha1 → 23.0.0-alpha2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/scroller",
-  "version": "23.0.0-alpha1",
+  "version": "23.0.0-alpha2",
   "publishConfig": {
     "access": "public"
   },
@@ -33,14 +33,14 @@
   ],
   "dependencies": {
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/component-base": "23.0.0-alpha1",
-    "@vaadin/vaadin-lumo-styles": "23.0.0-alpha1",
-    "@vaadin/vaadin-material-styles": "23.0.0-alpha1",
-    "@vaadin/vaadin-themable-mixin": "23.0.0-alpha1"
+    "@vaadin/component-base": "23.0.0-alpha2",
+    "@vaadin/vaadin-lumo-styles": "23.0.0-alpha2",
+    "@vaadin/vaadin-material-styles": "23.0.0-alpha2",
+    "@vaadin/vaadin-themable-mixin": "23.0.0-alpha2"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
     "@vaadin/testing-helpers": "^0.3.2"
   },
-  "gitHead": "fbcb07328fdf88260e3b461088d207426b21c710"
+  "gitHead": "070f586dead02ca41b66717820c647f48bf1665f"
 }

package/src/vaadin-scroller.d.ts

@@ -4,6 +4,7 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
+import { FocusMixin } from '@vaadin/component-base/src/focus-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
 /**
@@ -14,13 +15,24 @@ import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mix
  *   <div>Content</div>
  * </vaadin-scroller>
  * ```
+ * The following attributes are exposed for styling:
+ *
+ * Attribute    | Description
+ * -------------| -----------
+ * `focus-ring` | Set when the element is focused using the keyboard.
+ * `focused`    | Set when the element is focused.
  */
-declare class Scroller extends ThemableMixin(ElementMixin(HTMLElement)) {
+declare class Scroller extends FocusMixin(ThemableMixin(ElementMixin(HTMLElement))) {
   /**
    * This property indicates the scroll direction. Supported values are `vertical`, `horizontal`, `none`.
    * When `scrollDirection` is undefined scrollbars will be shown in both directions.
    */
   scrollDirection: 'horizontal' | 'vertical' | 'none' | undefined;
+
+  /**
+   * Indicates whether the element can be focused and where it participates in sequential keyboard navigation.
+   */
+  tabindex: number;
 }
 
 declare global {

package/src/vaadin-scroller.js

@@ -5,6 +5,7 @@
  */
 import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
+import { FocusMixin } from '@vaadin/component-base/src/focus-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
 /**
@@ -15,12 +16,19 @@ import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mix
  *   <div>Content</div>
  * </vaadin-scroller>
  * ```
+ * The following attributes are exposed for styling:
+ *
+ * Attribute    | Description
+ * -------------| -----------
+ * `focus-ring` | Set when the element is focused using the keyboard.
+ * `focused`    | Set when the element is focused.
  *
  * @extends HTMLElement
  * @mixes ThemableMixin
  * @mixes ElementMixin
+ * @mixes FocusMixin
  */
-class Scroller extends ElementMixin(ThemableMixin(PolymerElement)) {
+class Scroller extends FocusMixin(ElementMixin(ThemableMixin(PolymerElement))) {
   static get template() {
     return html`
       <style>
@@ -63,9 +71,30 @@ class Scroller extends ElementMixin(ThemableMixin(PolymerElement)) {
       scrollDirection: {
         type: String,
         reflectToAttribute: true
+      },
+
+      /**
+       * Indicates whether the element can be focused and where it participates in sequential keyboard navigation.
+       * @protected
+       */
+      tabindex: {
+        type: Number,
+        value: 0,
+        reflectToAttribute: true
       }
     };
   }
+
+  /**
+   * Override method inherited from `FocusMixin` to mark the scroller as focused
+   * only when the host is focused.
+   * @param {Event} event
+   * @return {boolean}
+   * @protected
+   */
+  _shouldSetFocus(event) {
+    return event.target === this;
+  }
 }
 
 customElements.define(Scroller.is, Scroller);

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

@@ -0,0 +1,16 @@
+import '@vaadin/vaadin-lumo-styles/color.js';
+import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+
+const scroller = css`
+  :host {
+    outline: none;
+  }
+
+  :host([focus-ring]) {
+    box-shadow: 0 0 0 2px var(--lumo-primary-color-50pct);
+  }
+`;
+
+registerStyles('vaadin-scroller', scroller, { moduleId: 'lumo-scroller' });
+
+export { scroller };

package/theme/lumo/vaadin-scroller.js

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

package/theme/material/vaadin-scroller-styles.js

@@ -0,0 +1,16 @@
+import '@vaadin/vaadin-material-styles/color.js';
+import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+
+const scroller = css`
+  :host {
+    outline: none;
+  }
+
+  :host([focus-ring]) {
+    box-shadow: 0 0 0 2px var(--material-primary-color);
+  }
+`;
+
+registerStyles('vaadin-scroller', scroller, { moduleId: 'material-scroller' });
+
+export { scroller };

package/theme/material/vaadin-scroller.js

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