@maggioli-design-system/mds-paginator-item 2.1.0 → 2.2.0

package/dist/cjs/{index-788f9a49.js → index-969219be.js}

@@ -133,6 +133,14 @@ const h = (nodeName, vnodeData, ...children) => {
     }
     return vnode;
 };
+/**
+ * A utility function for creating a virtual DOM node from a tag and some
+ * possible text content.
+ *
+ * @param tag the tag for this element
+ * @param text possible text content for the node
+ * @returns a newly-minted virtual DOM node
+ */
 const newVNode = (tag, text) => {
     const vnode = {
         $flags$: 0,
@@ -147,6 +155,12 @@ const newVNode = (tag, text) => {
     return vnode;
 };
 const Host = {};
+/**
+ * Check whether a given node is a Host node or not
+ *
+ * @param node the virtual DOM node to check
+ * @returns whether it's a Host node or not
+ */
 const isHost = (node) => node && node.$tag$ === Host;
 /**
  * Parse a new property value for a given property type.
@@ -191,6 +205,7 @@ const parsePropertyValue = (propValue, propType) => {
     // so no need to change to a different type
     return propValue;
 };
+const getElement = (ref) => (getHostRef(ref).$hostElement$ );
 /**
  * Helper function to create & dispatch a custom Event on a provided target
  * @param elm the target of the Event
@@ -405,6 +420,21 @@ const createElm = (oldParentVNode, newParentVNode, childIndex, parentElm) => {
     }
     return elm;
 };
+/**
+ * Create DOM nodes corresponding to a list of {@link d.Vnode} objects and
+ * add them to the DOM in the appropriate place.
+ *
+ * @param parentElm the DOM node which should be used as a parent for the new
+ * DOM nodes
+ * @param before a child of the `parentElm` which the new children should be
+ * inserted before (optional)
+ * @param parentVNode the parent virtual DOM node
+ * @param vnodes the new child virtual DOM nodes to produce DOM nodes for
+ * @param startIdx the index in the child virtual DOM nodes at which to start
+ * creating DOM nodes (inclusive)
+ * @param endIdx the index in the child virtual DOM nodes at which to stop
+ * creating DOM nodes (inclusive)
+ */
 const addVnodes = (parentElm, before, parentVNode, vnodes, startIdx, endIdx) => {
     let containerElm = (parentElm);
     let childNode;
@@ -421,6 +451,19 @@ const addVnodes = (parentElm, before, parentVNode, vnodes, startIdx, endIdx) =>
         }
     }
 };
+/**
+ * Remove the DOM elements corresponding to a list of {@link d.VNode} objects.
+ * This can be used to, for instance, clean up after a list of children which
+ * should no longer be shown.
+ *
+ * This function also handles some of Stencil's slot relocation logic.
+ *
+ * @param vnodes a list of virtual DOM nodes to remove
+ * @param startIdx the index at which to start removing nodes (inclusive)
+ * @param endIdx the index at which to stop removing nodes (inclusive)
+ * @param vnode a VNode
+ * @param elm an element
+ */
 const removeVnodes = (vnodes, startIdx, endIdx, vnode, elm) => {
     for (; startIdx <= endIdx; ++startIdx) {
         if ((vnode = vnodes[startIdx])) {
@@ -612,7 +655,8 @@ const updateChildren = (parentElm, oldCh, newVNode, newCh) => {
  *
  * So, in other words, if `key` attrs are not set on VNodes which may be
  * changing order within a `children` array or something along those lines then
- * we could obtain a false positive and then have to do needless re-rendering.
+ * we could obtain a false negative and then have to do needless re-rendering
+ * (i.e. we'd say two VNodes aren't equal when in fact they should be).
  *
  * @param leftVNode the first VNode to check
  * @param rightVNode the second VNode to check
@@ -676,6 +720,18 @@ const patch = (oldVNode, newVNode) => {
         elm.data = text;
     }
 };
+/**
+ * The main entry point for Stencil's virtual DOM-based rendering engine
+ *
+ * Given a {@link d.HostRef} container and some virtual DOM nodes, this
+ * function will handle creating a virtual DOM tree with a single root, patching
+ * the current virtual DOM tree onto an old one (if any), dealing with slot
+ * relocation, and reflecting attributes.
+ *
+ * @param hostRef data needed to root and render the virtual DOM tree, such as
+ * the DOM node into which it should be rendered.
+ * @param renderFnResults the virtual DOM nodes to be rendered
+ */
 const renderVdom = (hostRef, renderFnResults) => {
     const hostElm = hostRef.$hostElement$;
     const cmpMeta = hostRef.$cmpMeta$;
@@ -1290,6 +1346,7 @@ const writeTask = /*@__PURE__*/ queueTask(queueDomWrites, true);
 
 exports.Host = Host;
 exports.bootstrapLazy = bootstrapLazy;
+exports.getElement = getElement;
 exports.h = h;
 exports.promiseResolve = promiseResolve;
 exports.registerInstance = registerInstance;

package/dist/cjs/loader.cjs.js

@@ -2,10 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-788f9a49.js');
+const index = require('./index-969219be.js');
 
 /*
- Stencil Client Patch Esm v2.22.1 | MIT Licensed | https://stenciljs.com
+ Stencil Client Patch Esm v2.22.2 | MIT Licensed | https://stenciljs.com
  */
 const patchEsm = () => {
     return index.promiseResolve();
@@ -14,7 +14,7 @@ const patchEsm = () => {
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
-  return index.bootstrapLazy([["mds-paginator-item.cjs",[[1,"mds-paginator-item",{"icon":[1],"active":[516],"disabled":[516]}]]]], options);
+  return index.bootstrapLazy([["mds-paginator-item.cjs",[[1,"mds-paginator-item",{"icon":[513],"active":[516],"disabled":[516]}]]]], options);
   });
 };
 

package/dist/cjs/mds-paginator-item.cjs.entry.js

@@ -2,24 +2,79 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-788f9a49.js');
+const index = require('./index-969219be.js');
 
-function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e))for(t=0;t<e.length;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f);else for(t in e)e[t]&&(n&&(n+=" "),n+=t);return n}function clsx(){for(var e,t,f=0,n="";f<arguments.length;)(e=arguments[f++])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n}
+class KeyboardManager {
+  constructor() {
+    this.elements = [];
+    this.handleClickBehaviorDispatchEvent = (event) => {
+      if (event.code === 'Space' || event.code === 'Enter' || event.code === 'NumpadEnter') {
+        event.target.click();
+      }
+    };
+    this.handleEscapeBehaviorDispatchEvent = (event) => {
+      if (event.code === 'Escape' && this.escapeCallback) {
+        this.escapeCallback();
+      }
+    };
+    this.addElement = (el, name = 'element') => {
+      this.elements[name] = el;
+    };
+    this.attachClickBehavior = (name = 'element') => {
+      if (this.elements[name]) {
+        this.elements[name].addEventListener('keydown', this.handleClickBehaviorDispatchEvent);
+      }
+    };
+    this.detachClickBehavior = (name = 'element') => {
+      if (this.elements[name]) {
+        this.elements[name].removeEventListener('keydown', this.handleClickBehaviorDispatchEvent);
+      }
+    };
+    this.attachEscapeBehavior = (callBack) => {
+      this.escapeCallback = callBack;
+      if (typeof window !== undefined) {
+        window.addEventListener('keydown', this.handleEscapeBehaviorDispatchEvent.bind(this));
+      }
+    };
+    this.detachEscapeBehavior = () => {
+      this.escapeCallback = null;
+      if (typeof window !== undefined) {
+        window.removeEventListener('keydown', this.handleEscapeBehaviorDispatchEvent.bind(this));
+      }
+    };
+  }
+}
 
-const mdsPaginatorItemCss = ".fixed{position:fixed}.absolute{position:absolute}.border{border-width:1px}.shadow{--tw-shadow:0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);-webkit-box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}:host{--mds-paginator-item-background-disabled:rgb(var(--tone-neutral-09));--mds-paginator-item-background-hover:rgb(var(--tone-neutral-08));--mds-paginator-item-background-selected:rgb(var(--brand-maggioli-03));--mds-paginator-item-background:rgb(var(--tone-neutral-09));--mds-paginator-item-color-disabled:rgb(var(--tone-neutral-06));--mds-paginator-item-color-hover:rgb(var(--tone-neutral-02));--mds-paginator-item-color-selected:rgb(var(--tone-neutral));--mds-paginator-item-color:rgb(var(--tone-neutral-02));--mds-paginator-item-radius:200px;--mds-paginator-item-shadow-disabled:none;--mds-paginator-item-shadow-hover:none;--mds-paginator-item-shadow-selected:0 0 1px 1px rgba(0, 0, 0, 0.06), 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);--mds-paginator-item-shadow:none;--mds-paginator-item-size:2.25rem;-webkit-box-sizing:border-box;box-sizing:border-box;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-negative:0;flex-shrink:0;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;padding-left:0.75rem;padding-right:0.75rem;-webkit-transition-property:color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;transition-property:color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);-webkit-transition-duration:150ms;transition-duration:150ms;background-color:var(--mds-paginator-item-background);border-radius:var(--mds-paginator-item-radius);-webkit-box-shadow:var(--mds-paginator-item-shadow);box-shadow:var(--mds-paginator-item-shadow);color:var(--mds-paginator-item-color);height:var(--mds-paginator-item-size);min-width:var(--mds-paginator-item-size)}:host(:hover){background-color:var(--mds-paginator-item-background-hover);-webkit-box-shadow:var(--mds-paginator-item-shadow-hover);box-shadow:var(--mds-paginator-item-shadow-hover);color:var(--mds-paginator-item-color-hover);fill:var(--mds-paginator-item-color-hover)}:host([active]){pointer-events:none;background-color:var(--mds-paginator-item-background-selected);-webkit-box-shadow:var(--mds-paginator-item-shadow-selected);box-shadow:var(--mds-paginator-item-shadow-selected);color:var(--mds-paginator-item-color-selected);fill:var(--mds-paginator-item-color-selected)}:host([disabled]){pointer-events:none;background-color:var(--mds-paginator-item-background-disabled);-webkit-box-shadow:var(--mds-paginator-item-shadow-disabled);box-shadow:var(--mds-paginator-item-shadow-disabled);color:var(--mds-paginator-item-color-disabled);fill:var(--mds-paginator-item-color-disabled)}.icon{padding-left:0px;padding-right:0px}";
+const mdsPaginatorItemCss = "@tailwind components; .fixed{position:fixed}.absolute{position:absolute}.border{border-width:1px}.shadow{--tw-shadow:0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);-webkit-box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}:host{--mds-paginator-item-background-disabled:rgb(var(--tone-neutral-09));--mds-paginator-item-background-hover:rgb(var(--tone-neutral-08));--mds-paginator-item-background-selected:rgb(var(--brand-maggioli-03));--mds-paginator-item-background:transparent;--mds-paginator-item-color-disabled:rgb(var(--tone-neutral-06));--mds-paginator-item-color-hover:rgb(var(--tone-neutral-02));--mds-paginator-item-color-selected:rgb(var(--tone-neutral));--mds-paginator-item-color:rgb(var(--tone-neutral-02));--mds-paginator-item-radius:200px;--mds-paginator-item-shadow-disabled:none;--mds-paginator-item-shadow-hover:none;--mds-paginator-item-shadow-selected:0 0 1px 1px rgba(0, 0, 0, 0.06), 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);--mds-paginator-item-shadow:none;--mds-paginator-item-size:2.25rem;outline-offset:var(--magma-outline-blur-offset);outline:var(--magma-outline-blur);-webkit-transition-property:background-color, border-color, color, fill, outline, outline-offset, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, fill, outline, outline-offset, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, fill, outline, outline-offset, transform;transition-property:background-color, border-color, box-shadow, color, fill, outline, outline-offset, transform, -webkit-box-shadow, -webkit-transform;-webkit-box-sizing:border-box;box-sizing:border-box;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-negative:0;flex-shrink:0;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;padding-left:0.75rem;padding-right:0.75rem;-webkit-transition-duration:200ms;transition-duration:200ms;-webkit-transition-timing-function:cubic-bezier(0, 0, 0.2, 1);transition-timing-function:cubic-bezier(0, 0, 0.2, 1);background-color:var(--mds-paginator-item-background);border-radius:var(--mds-paginator-item-radius);-webkit-box-shadow:var(--mds-paginator-item-shadow);box-shadow:var(--mds-paginator-item-shadow);color:var(--mds-paginator-item-color);height:var(--mds-paginator-item-size);min-width:var(--mds-paginator-item-size);-webkit-transition-property:background-color, color, outline, outline-offset, -webkit-box-shadow;transition-property:background-color, color, outline, outline-offset, -webkit-box-shadow;transition-property:background-color, box-shadow, color, outline, outline-offset;transition-property:background-color, box-shadow, color, outline, outline-offset, -webkit-box-shadow}:host(:focus-visible){--magma-outline-blur-offset:var(--magma-outline-focus-offset);--magma-outline-blur:var(--magma-outline-focus)}:host(:hover){background-color:var(--mds-paginator-item-background-hover);-webkit-box-shadow:var(--mds-paginator-item-shadow-hover);box-shadow:var(--mds-paginator-item-shadow-hover);color:var(--mds-paginator-item-color-hover);fill:var(--mds-paginator-item-color-hover)}:host([icon]){padding:0px}:host([active]){pointer-events:none;background-color:var(--mds-paginator-item-background-selected);-webkit-box-shadow:var(--mds-paginator-item-shadow-selected);box-shadow:var(--mds-paginator-item-shadow-selected);color:var(--mds-paginator-item-color-selected);fill:var(--mds-paginator-item-color-selected)}:host([disabled]){pointer-events:none;background-color:var(--mds-paginator-item-background-disabled);-webkit-box-shadow:var(--mds-paginator-item-shadow-disabled);box-shadow:var(--mds-paginator-item-shadow-disabled);color:var(--mds-paginator-item-color-disabled);fill:var(--mds-paginator-item-color-disabled)}.icon{padding-left:0px;padding-right:0px}";
 
 const MdsPaginatorItem = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
+    this.km = new KeyboardManager();
+    this.componentDidLoad = () => {
+      this.km.addElement(this.host);
+      this.km.attachClickBehavior();
+    };
+    this.componentDidUpdate = () => {
+      if (!this.disabled && !this.active) {
+        this.km.attachClickBehavior();
+        return;
+      }
+      this.km.detachClickBehavior();
+    };
+    this.disconnectedCallback = () => {
+      this.km.detachClickBehavior();
+    };
     this.icon = undefined;
     this.active = undefined;
     this.disabled = undefined;
   }
   render() {
-    return (index.h(index.Host, { class: clsx(this.active && 'active', this.disabled && 'disabled', this.icon && 'icon') }, this.icon !== undefined
+    return (index.h(index.Host, { tabindex: "0" }, this.icon !== undefined
       ? index.h("mds-icon", { name: this.icon })
       : index.h("mds-text", { class: "text", typography: "detail" }, index.h("slot", null))));
   }
+  get host() { return index.getElement(this); }
 };
 MdsPaginatorItem.style = mdsPaginatorItemCss;
 

package/dist/cjs/mds-paginator-item.cjs.js

@@ -2,10 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-788f9a49.js');
+const index = require('./index-969219be.js');
 
 /*
- Stencil Client Patch Browser v2.22.1 | MIT Licensed | https://stenciljs.com
+ Stencil Client Patch Browser v2.22.2 | MIT Licensed | https://stenciljs.com
  */
 const patchBrowser = () => {
     const importMeta = (typeof document === 'undefined' ? new (require('u' + 'rl').URL)('file:' + __filename).href : (document.currentScript && document.currentScript.src || new URL('mds-paginator-item.cjs.js', document.baseURI).href));
@@ -17,7 +17,7 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(options => {
-  return index.bootstrapLazy([["mds-paginator-item.cjs",[[1,"mds-paginator-item",{"icon":[1],"active":[516],"disabled":[516]}]]]], options);
+  return index.bootstrapLazy([["mds-paginator-item.cjs",[[1,"mds-paginator-item",{"icon":[513],"active":[516],"disabled":[516]}]]]], options);
 });
 
 exports.setNonce = index.setNonce;

package/dist/collection/collection-manifest.json

@@ -4,7 +4,7 @@
   ],
   "compiler": {
     "name": "@stencil/core",
-    "version": "2.22.1",
+    "version": "2.22.2",
     "typescriptVersion": "4.9.4"
   },
   "collections": [],

package/dist/collection/common/keyboard-manager.js

@@ -0,0 +1,40 @@
+export class KeyboardManager {
+  constructor() {
+    this.elements = [];
+    this.handleClickBehaviorDispatchEvent = (event) => {
+      if (event.code === 'Space' || event.code === 'Enter' || event.code === 'NumpadEnter') {
+        event.target.click();
+      }
+    };
+    this.handleEscapeBehaviorDispatchEvent = (event) => {
+      if (event.code === 'Escape' && this.escapeCallback) {
+        this.escapeCallback();
+      }
+    };
+    this.addElement = (el, name = 'element') => {
+      this.elements[name] = el;
+    };
+    this.attachClickBehavior = (name = 'element') => {
+      if (this.elements[name]) {
+        this.elements[name].addEventListener('keydown', this.handleClickBehaviorDispatchEvent);
+      }
+    };
+    this.detachClickBehavior = (name = 'element') => {
+      if (this.elements[name]) {
+        this.elements[name].removeEventListener('keydown', this.handleClickBehaviorDispatchEvent);
+      }
+    };
+    this.attachEscapeBehavior = (callBack) => {
+      this.escapeCallback = callBack;
+      if (typeof window !== undefined) {
+        window.addEventListener('keydown', this.handleEscapeBehaviorDispatchEvent.bind(this));
+      }
+    };
+    this.detachEscapeBehavior = () => {
+      this.escapeCallback = null;
+      if (typeof window !== undefined) {
+        window.removeEventListener('keydown', this.handleEscapeBehaviorDispatchEvent.bind(this));
+      }
+    };
+  }
+}

package/dist/collection/components/mds-paginator-item/mds-paginator-item.css

@@ -1,19 +1,17 @@
-.fixed {
+@tailwind components;
+.fixed{
 
   position: fixed;
 }
-
-.absolute {
+.absolute{
 
   position: absolute;
 }
-
-.border {
+.border{
 
   border-width: 1px;
 }
-
-.shadow {
+.shadow{
 
   --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
 
@@ -22,7 +20,7 @@
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
-/*
+/**
   * @prop --mds-paginator-item-background-disabled: Sets the background-color of the item when is disabled
   * @prop --mds-paginator-item-background-hover: Sets the background-color of the item when the mouse is over it
   * @prop --mds-paginator-item-background-selected: Sets the background-color of the item when is selected
@@ -44,7 +42,7 @@
   --mds-paginator-item-background-disabled: rgb(var(--tone-neutral-09));
   --mds-paginator-item-background-hover: rgb(var(--tone-neutral-08));
   --mds-paginator-item-background-selected: rgb(var(--brand-maggioli-03));
-  --mds-paginator-item-background: rgb(var(--tone-neutral-09));
+  --mds-paginator-item-background: transparent;
   --mds-paginator-item-color-disabled: rgb(var(--tone-neutral-06));
   --mds-paginator-item-color-hover: rgb(var(--tone-neutral-02));
   --mds-paginator-item-color-selected: rgb(var(--tone-neutral));
@@ -55,20 +53,23 @@
   --mds-paginator-item-shadow-selected: 0 0 1px 1px rgba(0, 0, 0, 0.06), 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
   --mds-paginator-item-shadow: none;
   --mds-paginator-item-size: 2.25rem;
-  box-sizing: border-box;
-  display: inline-flex;
-  flex-shrink: 0;
-  cursor: pointer;
-  -webkit-user-select: none;
-     -moz-user-select: none;
-          user-select: none;
-  align-items: center;
-  justify-content: center;
-  padding-left: 0.75rem;
-  padding-right: 0.75rem;
-  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: 150ms;
+
+    outline-offset: var(--magma-outline-blur-offset);
+    outline: var(--magma-outline-blur);
+    transition-property: background-color, border-color, box-shadow, color, fill, outline, outline-offset, transform;
+    box-sizing: border-box;
+    display: inline-flex;
+    flex-shrink: 0;
+    cursor: pointer;
+    -webkit-user-select: none;
+       -moz-user-select: none;
+            user-select: none;
+    align-items: center;
+    justify-content: center;
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
+    transition-duration: 200ms;
+    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
 
   background-color: var(--mds-paginator-item-background);
   border-radius: var(--mds-paginator-item-radius);
@@ -76,8 +77,14 @@
   color: var(--mds-paginator-item-color);
   height: var(--mds-paginator-item-size);
   min-width: var(--mds-paginator-item-size);
+  transition-property: background-color, box-shadow, color, outline, outline-offset;
 }
 
+:host( :focus-visible ) {
+    --magma-outline-blur-offset: var(--magma-outline-focus-offset);
+    --magma-outline-blur: var(--magma-outline-focus);
+  }
+
 :host( :hover ) {
   background-color: var(--mds-paginator-item-background-hover);
   box-shadow: var(--mds-paginator-item-shadow-hover);
@@ -85,7 +92,12 @@
   fill: var(--mds-paginator-item-color-hover);
 }
 
-:host ( [active]) {
+:host ( [icon]){
+
+  padding: 0px;
+}
+
+:host ( [active]){
 
   pointer-events: none;
 
@@ -95,7 +107,7 @@
   fill: var(--mds-paginator-item-color-selected);
 }
 
-:host ( [disabled]) {
+:host ( [disabled]){
 
   pointer-events: none;
 
@@ -105,7 +117,7 @@
   fill: var(--mds-paginator-item-color-disabled);
 }
 
-.icon {
+.icon{
 
   padding-left: 0px;
 

package/dist/collection/components/mds-paginator-item/mds-paginator-item.js

@@ -1,13 +1,28 @@
 import { Host, h } from '@stencil/core';
-import clsx from 'clsx';
+import { KeyboardManager } from '@common/keyboard-manager';
 export class MdsPaginatorItem {
   constructor() {
+    this.km = new KeyboardManager();
+    this.componentDidLoad = () => {
+      this.km.addElement(this.host);
+      this.km.attachClickBehavior();
+    };
+    this.componentDidUpdate = () => {
+      if (!this.disabled && !this.active) {
+        this.km.attachClickBehavior();
+        return;
+      }
+      this.km.detachClickBehavior();
+    };
+    this.disconnectedCallback = () => {
+      this.km.detachClickBehavior();
+    };
     this.icon = undefined;
     this.active = undefined;
     this.disabled = undefined;
   }
   render() {
-    return (h(Host, { class: clsx(this.active && 'active', this.disabled && 'disabled', this.icon && 'icon') }, this.icon !== undefined
+    return (h(Host, { tabindex: "0" }, this.icon !== undefined
       ? h("mds-icon", { name: this.icon })
       : h("mds-text", { class: "text", typography: "detail" }, h("slot", null))));
   }
@@ -40,7 +55,7 @@ export class MdsPaginatorItem {
           "text": "Specifies the icon used inside the paginator item"
         },
         "attribute": "icon",
-        "reflect": false
+        "reflect": true
       },
       "active": {
         "type": "boolean",
@@ -78,4 +93,5 @@ export class MdsPaginatorItem {
       }
     };
   }
+  static get elementRef() { return "host"; }
 }

package/dist/collection/dictionary/icon.js

@@ -1,3 +1,5 @@
 import jsonIconsDictionary from '../fixtures/icons.json';
+import jsonMggIconsDictionary from '../fixtures/iconsauce.json';
 const iconsDictionary = jsonIconsDictionary;
-export { iconsDictionary, };
+const mggIconsDictionary = jsonMggIconsDictionary;
+export { iconsDictionary, mggIconsDictionary, };

package/dist/collection/dictionary/typography.js

@@ -21,6 +21,10 @@ const typographyVariationsDictionary = [
   'read',
   'code',
 ];
+const typographyReadingVariationsDictionary = [
+  'info',
+  'read',
+];
 const typographyMonoDictionary = [
   'snippet',
   'hack',
@@ -56,4 +60,4 @@ const typographyTooltipDictionary = [
   'detail',
   'tip',
 ];
-export { typographyDictionary, typographyVariationsDictionary, typographyMonoDictionary, typographyTitleDictionary, typographyInfoDictionary, typographyReadDictionary, typographySmallerDictionary, typographyTooltipDictionary, };
+export { typographyDictionary, typographyInfoDictionary, typographyReadingVariationsDictionary, typographyMonoDictionary, typographyReadDictionary, typographySmallerDictionary, typographyTitleDictionary, typographyTooltipDictionary, typographyVariationsDictionary, };

package/dist/components/mds-paginator-item.js

@@ -1,26 +1,81 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 
-function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e))for(t=0;t<e.length;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f);else for(t in e)e[t]&&(n&&(n+=" "),n+=t);return n}function clsx(){for(var e,t,f=0,n="";f<arguments.length;)(e=arguments[f++])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n}
+class KeyboardManager {
+  constructor() {
+    this.elements = [];
+    this.handleClickBehaviorDispatchEvent = (event) => {
+      if (event.code === 'Space' || event.code === 'Enter' || event.code === 'NumpadEnter') {
+        event.target.click();
+      }
+    };
+    this.handleEscapeBehaviorDispatchEvent = (event) => {
+      if (event.code === 'Escape' && this.escapeCallback) {
+        this.escapeCallback();
+      }
+    };
+    this.addElement = (el, name = 'element') => {
+      this.elements[name] = el;
+    };
+    this.attachClickBehavior = (name = 'element') => {
+      if (this.elements[name]) {
+        this.elements[name].addEventListener('keydown', this.handleClickBehaviorDispatchEvent);
+      }
+    };
+    this.detachClickBehavior = (name = 'element') => {
+      if (this.elements[name]) {
+        this.elements[name].removeEventListener('keydown', this.handleClickBehaviorDispatchEvent);
+      }
+    };
+    this.attachEscapeBehavior = (callBack) => {
+      this.escapeCallback = callBack;
+      if (typeof window !== undefined) {
+        window.addEventListener('keydown', this.handleEscapeBehaviorDispatchEvent.bind(this));
+      }
+    };
+    this.detachEscapeBehavior = () => {
+      this.escapeCallback = null;
+      if (typeof window !== undefined) {
+        window.removeEventListener('keydown', this.handleEscapeBehaviorDispatchEvent.bind(this));
+      }
+    };
+  }
+}
 
-const mdsPaginatorItemCss = ".fixed{position:fixed}.absolute{position:absolute}.border{border-width:1px}.shadow{--tw-shadow:0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);-webkit-box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}:host{--mds-paginator-item-background-disabled:rgb(var(--tone-neutral-09));--mds-paginator-item-background-hover:rgb(var(--tone-neutral-08));--mds-paginator-item-background-selected:rgb(var(--brand-maggioli-03));--mds-paginator-item-background:rgb(var(--tone-neutral-09));--mds-paginator-item-color-disabled:rgb(var(--tone-neutral-06));--mds-paginator-item-color-hover:rgb(var(--tone-neutral-02));--mds-paginator-item-color-selected:rgb(var(--tone-neutral));--mds-paginator-item-color:rgb(var(--tone-neutral-02));--mds-paginator-item-radius:200px;--mds-paginator-item-shadow-disabled:none;--mds-paginator-item-shadow-hover:none;--mds-paginator-item-shadow-selected:0 0 1px 1px rgba(0, 0, 0, 0.06), 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);--mds-paginator-item-shadow:none;--mds-paginator-item-size:2.25rem;-webkit-box-sizing:border-box;box-sizing:border-box;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-negative:0;flex-shrink:0;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;padding-left:0.75rem;padding-right:0.75rem;-webkit-transition-property:color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;transition-property:color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);-webkit-transition-duration:150ms;transition-duration:150ms;background-color:var(--mds-paginator-item-background);border-radius:var(--mds-paginator-item-radius);-webkit-box-shadow:var(--mds-paginator-item-shadow);box-shadow:var(--mds-paginator-item-shadow);color:var(--mds-paginator-item-color);height:var(--mds-paginator-item-size);min-width:var(--mds-paginator-item-size)}:host(:hover){background-color:var(--mds-paginator-item-background-hover);-webkit-box-shadow:var(--mds-paginator-item-shadow-hover);box-shadow:var(--mds-paginator-item-shadow-hover);color:var(--mds-paginator-item-color-hover);fill:var(--mds-paginator-item-color-hover)}:host([active]){pointer-events:none;background-color:var(--mds-paginator-item-background-selected);-webkit-box-shadow:var(--mds-paginator-item-shadow-selected);box-shadow:var(--mds-paginator-item-shadow-selected);color:var(--mds-paginator-item-color-selected);fill:var(--mds-paginator-item-color-selected)}:host([disabled]){pointer-events:none;background-color:var(--mds-paginator-item-background-disabled);-webkit-box-shadow:var(--mds-paginator-item-shadow-disabled);box-shadow:var(--mds-paginator-item-shadow-disabled);color:var(--mds-paginator-item-color-disabled);fill:var(--mds-paginator-item-color-disabled)}.icon{padding-left:0px;padding-right:0px}";
+const mdsPaginatorItemCss = "@tailwind components; .fixed{position:fixed}.absolute{position:absolute}.border{border-width:1px}.shadow{--tw-shadow:0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);-webkit-box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}:host{--mds-paginator-item-background-disabled:rgb(var(--tone-neutral-09));--mds-paginator-item-background-hover:rgb(var(--tone-neutral-08));--mds-paginator-item-background-selected:rgb(var(--brand-maggioli-03));--mds-paginator-item-background:transparent;--mds-paginator-item-color-disabled:rgb(var(--tone-neutral-06));--mds-paginator-item-color-hover:rgb(var(--tone-neutral-02));--mds-paginator-item-color-selected:rgb(var(--tone-neutral));--mds-paginator-item-color:rgb(var(--tone-neutral-02));--mds-paginator-item-radius:200px;--mds-paginator-item-shadow-disabled:none;--mds-paginator-item-shadow-hover:none;--mds-paginator-item-shadow-selected:0 0 1px 1px rgba(0, 0, 0, 0.06), 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);--mds-paginator-item-shadow:none;--mds-paginator-item-size:2.25rem;outline-offset:var(--magma-outline-blur-offset);outline:var(--magma-outline-blur);-webkit-transition-property:background-color, border-color, color, fill, outline, outline-offset, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, fill, outline, outline-offset, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, fill, outline, outline-offset, transform;transition-property:background-color, border-color, box-shadow, color, fill, outline, outline-offset, transform, -webkit-box-shadow, -webkit-transform;-webkit-box-sizing:border-box;box-sizing:border-box;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-negative:0;flex-shrink:0;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;padding-left:0.75rem;padding-right:0.75rem;-webkit-transition-duration:200ms;transition-duration:200ms;-webkit-transition-timing-function:cubic-bezier(0, 0, 0.2, 1);transition-timing-function:cubic-bezier(0, 0, 0.2, 1);background-color:var(--mds-paginator-item-background);border-radius:var(--mds-paginator-item-radius);-webkit-box-shadow:var(--mds-paginator-item-shadow);box-shadow:var(--mds-paginator-item-shadow);color:var(--mds-paginator-item-color);height:var(--mds-paginator-item-size);min-width:var(--mds-paginator-item-size);-webkit-transition-property:background-color, color, outline, outline-offset, -webkit-box-shadow;transition-property:background-color, color, outline, outline-offset, -webkit-box-shadow;transition-property:background-color, box-shadow, color, outline, outline-offset;transition-property:background-color, box-shadow, color, outline, outline-offset, -webkit-box-shadow}:host(:focus-visible){--magma-outline-blur-offset:var(--magma-outline-focus-offset);--magma-outline-blur:var(--magma-outline-focus)}:host(:hover){background-color:var(--mds-paginator-item-background-hover);-webkit-box-shadow:var(--mds-paginator-item-shadow-hover);box-shadow:var(--mds-paginator-item-shadow-hover);color:var(--mds-paginator-item-color-hover);fill:var(--mds-paginator-item-color-hover)}:host([icon]){padding:0px}:host([active]){pointer-events:none;background-color:var(--mds-paginator-item-background-selected);-webkit-box-shadow:var(--mds-paginator-item-shadow-selected);box-shadow:var(--mds-paginator-item-shadow-selected);color:var(--mds-paginator-item-color-selected);fill:var(--mds-paginator-item-color-selected)}:host([disabled]){pointer-events:none;background-color:var(--mds-paginator-item-background-disabled);-webkit-box-shadow:var(--mds-paginator-item-shadow-disabled);box-shadow:var(--mds-paginator-item-shadow-disabled);color:var(--mds-paginator-item-color-disabled);fill:var(--mds-paginator-item-color-disabled)}.icon{padding-left:0px;padding-right:0px}";
 
 const MdsPaginatorItem$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
     this.__attachShadow();
+    this.km = new KeyboardManager();
+    this.componentDidLoad = () => {
+      this.km.addElement(this.host);
+      this.km.attachClickBehavior();
+    };
+    this.componentDidUpdate = () => {
+      if (!this.disabled && !this.active) {
+        this.km.attachClickBehavior();
+        return;
+      }
+      this.km.detachClickBehavior();
+    };
+    this.disconnectedCallback = () => {
+      this.km.detachClickBehavior();
+    };
     this.icon = undefined;
     this.active = undefined;
     this.disabled = undefined;
   }
   render() {
-    return (h(Host, { class: clsx(this.active && 'active', this.disabled && 'disabled', this.icon && 'icon') }, this.icon !== undefined
+    return (h(Host, { tabindex: "0" }, this.icon !== undefined
       ? h("mds-icon", { name: this.icon })
       : h("mds-text", { class: "text", typography: "detail" }, h("slot", null))));
   }
+  get host() { return this; }
   static get style() { return mdsPaginatorItemCss; }
 }, [1, "mds-paginator-item", {
-    "icon": [1],
+    "icon": [513],
     "active": [516],
     "disabled": [516]
   }]);