@redvars/peacock 3.2.3 → 3.2.4

package/dist/{unsafe-html-BIBrxtsS.js → unsafe-html-BS8X6Gto.js}

@@ -1,5 +1,5 @@
 import { A, E } from './lit-element-CA46RFZ_.js';
-import { i, t, e as e$1 } from './directive-Cuw6h7YA.js';
+import { e as e$1, i, t } from './directive-Cuw6h7YA.js';
 
 /**
  * @license
@@ -8,4 +8,4 @@ import { i, t, e as e$1 } from './directive-Cuw6h7YA.js';
  */class e extends i{constructor(i){if(super(i),this.it=A,i.type!==t.CHILD)throw Error(this.constructor.directiveName+"() can only be used in child bindings")}render(r){if(r===A||null==r)return this._t=void 0,this.it=r;if(r===E)return r;if("string"!=typeof r)throw Error(this.constructor.directiveName+"() called with a non-string value");if(r===this.it)return this._t;this.it=r;const s=[r];return s.raw=s,this._t={_$litType$:this.constructor.resultType,strings:s,values:[]}}}e.directiveName="unsafeHTML",e.resultType=1;const o=e$1(e);
 
 export { e, o };
-//# sourceMappingURL=unsafe-html-BIBrxtsS.js.map
+//# sourceMappingURL=unsafe-html-BS8X6Gto.js.map

package/dist/{unsafe-html-BIBrxtsS.js.map → unsafe-html-BS8X6Gto.js.map}

@@ -1 +1 @@
-{"version":3,"file":"unsafe-html-BIBrxtsS.js","sources":["../node_modules/lit-html/directives/unsafe-html.js"],"sourcesContent":["import{nothing as t,noChange as i}from\"../lit-html.js\";import{directive as r,Directive as s,PartType as n}from\"../directive.js\";\n/**\n * @license\n * Copyright 2017 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */class e extends s{constructor(i){if(super(i),this.it=t,i.type!==n.CHILD)throw Error(this.constructor.directiveName+\"() can only be used in child bindings\")}render(r){if(r===t||null==r)return this._t=void 0,this.it=r;if(r===i)return r;if(\"string\"!=typeof r)throw Error(this.constructor.directiveName+\"() called with a non-string value\");if(r===this.it)return this._t;this.it=r;const s=[r];return s.raw=s,this._t={_$litType$:this.constructor.resultType,strings:s,values:[]}}}e.directiveName=\"unsafeHTML\",e.resultType=1;const o=r(e);export{e as UnsafeHTMLDirective,o as unsafeHTML};\n//# sourceMappingURL=unsafe-html.js.map\n"],"names":["s","t","n","i","r"],"mappings":";;;AACA;AACA;AACA;AACA;AACA,GAAG,MAAM,CAAC,SAASA,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,CAACC,CAAC,CAAC,CAAC,CAAC,IAAI,GAAGC,CAAC,CAAC,KAAK,CAAC,MAAM,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,uCAAuC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,GAAGD,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC,OAAO,IAAI,CAAC,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,GAAGE,CAAC,CAAC,OAAO,CAAC,CAAC,GAAG,QAAQ,EAAE,OAAO,CAAC,CAAC,MAAM,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,mCAAmC,CAAC,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC,EAAE,CAAC,OAAO,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,UAAU,CAAC,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,aAAa,CAAC,YAAY,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAM,MAAC,CAAC,CAACC,GAAC,CAAC,CAAC;;;;","x_google_ignoreList":[0]}
+{"version":3,"file":"unsafe-html-BS8X6Gto.js","sources":["../node_modules/lit-html/directives/unsafe-html.js"],"sourcesContent":["import{nothing as t,noChange as i}from\"../lit-html.js\";import{directive as r,Directive as s,PartType as n}from\"../directive.js\";\n/**\n * @license\n * Copyright 2017 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */class e extends s{constructor(i){if(super(i),this.it=t,i.type!==n.CHILD)throw Error(this.constructor.directiveName+\"() can only be used in child bindings\")}render(r){if(r===t||null==r)return this._t=void 0,this.it=r;if(r===i)return r;if(\"string\"!=typeof r)throw Error(this.constructor.directiveName+\"() called with a non-string value\");if(r===this.it)return this._t;this.it=r;const s=[r];return s.raw=s,this._t={_$litType$:this.constructor.resultType,strings:s,values:[]}}}e.directiveName=\"unsafeHTML\",e.resultType=1;const o=r(e);export{e as UnsafeHTMLDirective,o as unsafeHTML};\n//# sourceMappingURL=unsafe-html.js.map\n"],"names":["s","t","n","i","r"],"mappings":";;;AACA;AACA;AACA;AACA;AACA,GAAG,MAAM,CAAC,SAASA,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,CAACC,CAAC,CAAC,CAAC,CAAC,IAAI,GAAGC,CAAC,CAAC,KAAK,CAAC,MAAM,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,uCAAuC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,GAAGD,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC,OAAO,IAAI,CAAC,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,GAAGE,CAAC,CAAC,OAAO,CAAC,CAAC,GAAG,QAAQ,EAAE,OAAO,CAAC,CAAC,MAAM,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,mCAAmC,CAAC,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC,EAAE,CAAC,OAAO,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,UAAU,CAAC,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,aAAa,CAAC,YAAY,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAM,MAAC,CAAC,CAACC,GAAC,CAAC,CAAC;;;;","x_google_ignoreList":[0]}

package/package.json

@@ -2,7 +2,7 @@
   "name": "@redvars/peacock",
   "description": "The foundation for beautiful user interfaces",
   "license": "Apache-2.0",
-  "version": "3.2.3",
+  "version": "3.2.4",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -11,6 +11,10 @@
     "lit",
     "web components"
   ],
+  "repository": {
+    "url": "https://github.com/redvars/peacock"
+  },
+  "private": false,
   "exports": {
     ".": "./dist/src/index.js",
     "./icon.js": "./dist/src/index.js"

package/readme.md

@@ -45,7 +45,7 @@ Visit [https://peacock.redvars.com](https://goatui.com) to view the documentatio
   <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+Mono:wght@100..900&family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
 
   <script type='module'
-          src='https://cdn.jsdelivr.net/npm/@redvars/peacock@3.2.1/dist/peacock-loader.js'></script>
+          src='https://cdn.jsdelivr.net/npm/@redvars/peacock@3.2.2/dist/peacock-loader.js'></script>
 </head>
 
 <p-avatar name="Shivaji Varma"></p-avatar>

package/src/button/BaseButton.ts

@@ -97,7 +97,7 @@ export class BaseButton extends LitElement {
   @state()
   isPressed = false;
 
-  @query('.button') private readonly buttonElement!: HTMLElement | null;
+  @query('.button') readonly buttonElement!: HTMLElement | null;
 
   override focus() {
     this.buttonElement?.focus();

package/src/button/button/button.scss

@@ -85,6 +85,7 @@ slot::slotted(*) {
     Background layers
    */
   .focus-ring {
+    z-index: 2;
     --focus-ring-container-shape-start-start: var(--_container-shape-start-start);
     --focus-ring-container-shape-start-end: var(--_container-shape-start-end);
     --focus-ring-container-shape-end-start: var(--_container-shape-end-start);

package/src/button/button/button.ts

@@ -136,7 +136,7 @@ export class Button extends BaseButton {
 
   renderButtonContent() {
     return html`
-      <focus-ring class="focus-ring" .control=${this}></focus-ring>
+      <focus-ring class="focus-ring" .control=${this} element="buttonElement"></focus-ring>
       <base-elevation class="elevation"></base-elevation>
       <div class="neo-background"></div>
       <div class="background"></div>

package/src/button/icon-button/icon-button.ts

@@ -133,7 +133,7 @@ export class IconButton extends BaseButton {
 
   renderButtonContent() {
     return html`
-      <focus-ring class="focus-ring" .control=${this}></focus-ring>
+      <focus-ring class="focus-ring" .control=${this} element="buttonElement"></focus-ring>
       <base-elevation class="elevation"></base-elevation>
       <div class="neo-background"></div>
       <div class="background"></div>

package/src/focus-ring/focus-ring.ts

@@ -18,6 +18,9 @@ export class FocusRing extends LitElement {
 
   @property({ type: Boolean, reflect: true }) visible: boolean = false;
 
+  @property({ type: String}) element = '';
+
+
   render() {
     return nothing;
   }
@@ -46,27 +49,41 @@ export class FocusRing extends LitElement {
     super.disconnectedCallback();
   }
 
+  __focusin() {
+    // @ts-ignore
+    this.visible = this._control[this.element].matches(':focus-visible') ?? false;
+  }
+
+  __focusout() {
+    this.visible = false;
+  }
+
+  __pointerdown() {
+    this.visible = false;
+  }
+
   attach() {
-    // @ts-ignore - buttonElement is not defined on the base class
-    this._control?.buttonElement?.addEventListener('focusin', () => {
-      this.visible =
-        // @ts-ignore - buttonElement is not defined on the base class
-        this._control?.buttonElement?.matches(':focus-visible') ?? false;
-    });
-    // @ts-ignore - buttonElement is not defined on the base class
-    this._control?.buttonElement?.addEventListener('focusout', () => {
-      this.visible = false;
-    });
-    // @ts-ignore - buttonElement is not defined on the base class
-    this._control?.buttonElement?.addEventListener('pointerdown', () => {
-      this.visible = false;
-    });
+    // @ts-ignore
+    if (this._control && this._control[this.element]) {
+      // @ts-ignore
+      this._control[this.element].addEventListener('focusin', this.__focusin.bind(this));
+      // @ts-ignore
+      this._control[this.element].addEventListener('focusout', this.__focusin.bind(this));
+      // @ts-ignore
+      this._control[this.element].addEventListener('pointerdown', this.__focusin.bind(this));
+    }
   }
 
   detach() {
-    this._control?.removeEventListener('focusin', () => {});
-    this._control?.removeEventListener('focusout', () => {});
-    this._control?.removeEventListener('pointerdown', () => {});
+    // @ts-ignore
+    if (this._control && this._control[this.element]) {
+      // @ts-ignore
+      this._control[this.element].removeEventListener('focusin', this.__focusin);
+      // @ts-ignore
+      this._control[this.element].removeEventListener('focusout', this.__focusout);
+      // @ts-ignore
+      this._control[this.element].removeEventListener('pointerdown', this.__pointerdown);
+    }
     this._control = undefined;
   }
 }

package/src/menu/demo/index.html

@@ -0,0 +1,36 @@
+<!doctype html>
+<html lang='en-GB'>
+<head>
+  <meta charset='utf-8'>
+  <meta name='viewport' content='width=device-width, initial-scale=1.0, viewport-fit=cover' />
+
+  <link rel='stylesheet' href='/dist/assets/styles/tokens.css' />
+  <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+Mono:wght@100..900&family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
+
+
+  <style>
+    body {
+      background: #fafafa;
+    }
+  </style>
+
+</head>
+<body>
+
+
+<p class='text-body'>
+  <p-link href='#' class='with-icon'><p-icon name='home'></p-icon> link</p-link>
+</p>
+
+<p class='text-body'>
+  <p-link href='#' class='inherit'> Testing No Style</p-link>
+</p>
+
+
+<script type='module'>
+  import { MenuList, MenuItem } from '/dist/index.js';
+  window.customElements.define('menu-list', MenuList);
+  window.customElements.define('menu-item', MenuItem);
+</script>
+</body>
+</html>

package/src/menu/menu-item/menu-item.scss

@@ -12,6 +12,7 @@
   display: flex;
   align-items: center;
   padding-inline: 0.75rem;
+  outline: 0;
 
   @include mixin.get-typography(label-large);
 
@@ -51,6 +52,18 @@
     pointer-events: none;
   }
 
+   /*
+    Background layers
+   */
+  .focus-ring {
+    z-index: 2;
+    --focus-ring-container-shape-start-start: var(--_container-shape-start-start);
+    --focus-ring-container-shape-start-end: var(--_container-shape-start-end);
+    --focus-ring-container-shape-end-start: var(--_container-shape-end-start);
+    --focus-ring-container-shape-end-end: var(--_container-shape-end-end);
+    --focus-ring-container-shape-variant: var(--_container-corner-shape-variant);
+  }
+
   .ripple {
     --ripple-state-opacity: var(--_container-state-opacity, 0);
     --ripple-pressed-color: var(--_container-state-color);

package/src/menu/menu-item/menu-item.ts

@@ -1,5 +1,5 @@
 import { html, LitElement } from 'lit';
-import { property } from 'lit/decorators.js';
+import { property, query } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import styles from './menu-item.scss';
 import colorStyles from './menu-item-colors.scss';
@@ -11,6 +11,17 @@ export class MenuItem extends LitElement {
 
   @property({ type: Boolean }) selected = false;
 
+  /*
+   * Hyperlink to navigate to on click.
+   */
+  @property({ reflect: true }) href?: string;
+
+   /**
+   * Sets or retrieves the window or frame at which to target content.
+   */
+  @property() target: string = '_self';
+
+
   @property({ type: String, reflect: true }) variant: 'standard' | 'vibrant' =
     'standard';
 
@@ -22,9 +33,6 @@ export class MenuItem extends LitElement {
     if (!this.hasAttribute('role')) {
       this.setAttribute('role', 'menuitem');
     }
-    if (!this.hasAttribute('tabindex') && !this.disabled) {
-      this.setAttribute('tabindex', '0');
-    }
   }
 
   // Handle keyboard activation (Enter/Space)
@@ -35,30 +43,66 @@ export class MenuItem extends LitElement {
     }
   }
 
+   __isLink() {
+    return !!this.href;
+  }
+
+   @query('.menu-item') private readonly menuItemElement!: HTMLElement | null;
+  
+    override focus() {
+      this.menuItemElement?.focus();
+    }
+  
+    override blur() {
+      this.menuItemElement?.blur();
+    }
+
   render() {
-    return html`
-      <div
-        class=${classMap({
+
+    const isLink = this.__isLink();
+
+    const cssClasses = {
           'menu-item': true,
           disabled: this.disabled,
           selected: this.selected,
-        })}
+        };
+
+    if (isLink) {
+      return html`<a
+        class=${classMap(cssClasses)}
+        href=${this.href}
+        target=${this.target}
+      >
+        ${this.renderContent()}
+      </a>
+    `;
+    }
+
+
+    return html`<div
+        class=${classMap(cssClasses)}
+        tabindex=${!this.disabled ? 0 : -1}
         @keydown="${this._handleKeyDown}"
       >
-        <div class="background"></div>
-        <base-ripple class="ripple"></base-ripple>
-
-        <div class="menu-item-content">
-          <slot name="leading-icon"></slot>
-          <base-icon name="home"></base-icon>
-          <div class="slot-container">
-            <slot></slot>
-          </div>
-          <slot
-            name="trailing-supporting-text"
-            slot="trailing-supporting-text"
-          ></slot>
+        ${this.renderContent()}
+      </div>
+    `;
+  }
+
+  renderContent() {
+    return html`
+      <focus-ring class="focus-ring" .control=${this}  element="menuItemElement"></focus-ring>
+      <div class="background"></div>
+      <base-ripple class="ripple"></base-ripple>
+
+      <div class="menu-item-content">
+        <slot name="leading-icon"></slot>
+        <div class="slot-container">
+          <slot></slot>
         </div>
+        <slot
+          name="trailing-supporting-text"
+        ></slot>
       </div>
     `;
   }