@redvars/peacock 3.1.1 → 3.1.3

package/src/icon/icon.ts

@@ -1,111 +1,131 @@
-import { html, LitElement } from 'lit';
-import { property, state } from 'lit/decorators.js';
-import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
-import { fetchIcon, fetchSVG } from './datasource.js';
-import { sanitizeSvg } from '../utils.js';
-import { styles } from './icon.css.js';
-
-export class Icon extends LitElement {
-  static styles = [styles];
-
-  @property({ type: String, reflect: true }) name?: string;
-
-  @property({ type: String, reflect: true }) src?: string;
-
-  @property({ type: String }) provider?: 'material-symbols' | 'carbon' =
-    'material-symbols';
-
-  @state()
-  private svgContent: string = '';
-
-  // loading + error states for consumers/tests
-  @state()
-  private loading: boolean = false;
-
-  @state()
-  private error: Error | null = null;
-
-  // token to avoid race conditions when multiple fetches overlap
-  private _fetchId = 0;
-
-  // optional debounce for rapid property changes
-  private _debounceTimer: number | undefined;
-
-  firstUpdated() {
-    // perform initial fetch once component is connected and rendered
-    this.__scheduleUpdate();
-  }
-
-  updated(changedProperties: any) {
-    // only refetch when name or src changed
-    if (changedProperties.has('name') || changedProperties.has('src')) {
-      this.__scheduleUpdate();
-    }
-  }
-
-  render() {
-    // accessible wrapper; consumers can provide a fallback via <slot name="fallback">.
-    return html` <div class="icon">
-      ${this.svgContent
-        ? unsafeSVG(this.svgContent)
-        : html`<slot name="fallback"></slot>`}
-    </div>`;
-  }
-
-  // small debounce to coalesce rapid changes (50ms)
-  private __scheduleUpdate() {
-    if (this._debounceTimer) {
-      clearTimeout(this._debounceTimer as any);
-    }
-    // @ts-ignore - setTimeout in DOM returns number
-    this._debounceTimer = window.setTimeout(() => this.__updateSvg(), 50);
-  }
-
-  /**
-   * @internal
-   */
-  private async __updateSvg() {
-    this._fetchId += 1;
-    const currentId = this._fetchId;
-    this.loading = true;
-    this.error = null;
-
-    try {
-      let raw: string | undefined;
-
-      if (this.name) {
-        raw = await fetchIcon(this.name, this.provider);
-      } else if (this.src) {
-        raw = await fetchSVG(this.src);
-      } else {
-        raw = '';
-      }
-
-      // If another fetch started after this one, ignore this result
-      if (currentId !== this._fetchId) return;
-
-      if (raw) {
-        this.svgContent = sanitizeSvg(raw);
-      } else {
-        this.svgContent = '';
-      }
-    } catch (err: any) {
-      // capture and surface error, but avoid throwing
-      this.error = err instanceof Error ? err : new Error(String(err));
-      this.svgContent = '';
-      // bubble an event so consumers can react
-      this.dispatchEvent(
-        new CustomEvent('icon-error', {
-          detail: { name: this.name, src: this.src, error: this.error },
-          bubbles: true,
-          composed: true,
-        }),
-      );
-    } finally {
-      // ensure loading is cleared unless another fetch started
-      if (currentId === this._fetchId) {
-        this.loading = false;
-      }
-    }
-  }
-}
+import { html, LitElement } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
+import { fetchIcon, fetchSVG } from './datasource.js';
+import { sanitizeSvg } from '../utils.js';
+import styles from './icon.scss';
+
+export type IconProvider = 'material-symbols' | 'material-icons';
+/**
+ * @label Icon
+ * @tag p-icon
+ * @rawTag icon
+ * @summary Icons are visual symbols used to represent ideas, objects, or actions.
+ * @overview Icons are visual symbols used to represent ideas, objects, or actions. They communicate messages at a glance, afford interactivity, and draw attention to important information.
+ *
+ * @cssprop --icon-color - Controls the color of the icon.
+ * @cssprop [--icon-size=1rem] - Controls the size of the icon. Defaults to "1rem"
+ *
+ * @example
+ * ```html
+ * <p-icon name="home"></p-icon>
+ * ```
+ *
+ */
+export class Icon extends LitElement {
+  static styles = [styles];
+
+  /**
+   * The identifier for the icon.
+   * This name corresponds to a specific SVG asset in the icon set.
+   */
+  @property({ type: String, reflect: true }) name?: string;
+
+  @property({ type: String, reflect: true }) src?: string;
+
+  @property({ type: String }) provider: IconProvider = 'material-symbols';
+
+  @state()
+  private svgContent: string = '';
+
+  // loading + error states for consumers/tests
+  @state() // @ts-ignore
+  private loading: boolean = false;
+
+  @state()
+  private error: Error | null = null;
+
+  // token to avoid race conditions when multiple fetches overlap
+  private _fetchId = 0;
+
+  // optional debounce for rapid property changes
+  private _debounceTimer: number | undefined;
+
+  firstUpdated() {
+    // perform initial fetch once component is connected and rendered
+    this.__scheduleUpdate();
+  }
+
+  updated(changedProperties: any) {
+    // only refetch when name or src changed
+    if (changedProperties.has('name') || changedProperties.has('src')) {
+      this.__scheduleUpdate();
+    }
+  }
+
+  render() {
+    // accessible wrapper; consumers can provide a fallback via <slot name="fallback">.
+    return html` <div class="icon">
+      ${this.svgContent
+        ? unsafeSVG(this.svgContent)
+        : html`<slot name="fallback"></slot>`}
+    </div>`;
+  }
+
+  // small debounce to coalesce rapid changes (50ms)
+  private __scheduleUpdate() {
+    if (this._debounceTimer) {
+      clearTimeout(this._debounceTimer as any);
+    }
+    // @ts-ignore - setTimeout in DOM returns number
+    this._debounceTimer = window.setTimeout(() => this.__updateSvg(), 50);
+  }
+
+  /**
+   * @internal
+   */
+  private async __updateSvg() {
+    this._fetchId += 1;
+    const currentId = this._fetchId;
+    this.loading = true;
+    this.error = null;
+
+    try {
+      let raw: string | undefined;
+
+      if (this.name) {
+        raw = await fetchIcon(this.name, this.provider);
+      } else if (this.src) {
+        raw = await fetchSVG(this.src);
+      } else {
+        raw = '';
+      }
+
+      // If another fetch started after this one, ignore this result
+      if (currentId !== this._fetchId) return;
+
+      if (raw) {
+        this.svgContent = sanitizeSvg(raw);
+      } else {
+        this.svgContent = '';
+      }
+    } catch (err: any) {
+      // capture and surface error, but avoid throwing
+      this.error = err instanceof Error ? err : new Error(String(err));
+      this.svgContent = '';
+      // bubble an event so consumers can react
+      this.dispatchEvent(
+        new CustomEvent('icon-error', {
+          detail: { name: this.name, src: this.src, error: this.error },
+          bubbles: true,
+          composed: true,
+        }),
+      );
+    } finally {
+      // ensure loading is cleared unless another fetch started
+      if (currentId === this._fetchId) {
+        this.loading = false;
+      }
+    }
+  }
+}

package/src/icon/p-icon.ts

@@ -1,12 +1,5 @@
 import { customElement } from 'lit/decorators.js';
 import { Icon } from './icon.js';
 
-/**
- * @name Icon
- * @summary Icons are visual symbols used to represent ideas, objects, or actions.
- *
- * @cssprop --icon-color - Controls the color of the icon.
- * @cssprop [--icon-size=1rem] - Controls the size of the icon. Defaults to "1rem"
- */
 @customElement('p-icon')
 export class PIcon extends Icon {}

package/src/index.ts

@@ -1,3 +1,9 @@
-export { Icon } from './icon/index.js';
-export { Avatar } from './avatar/index.js';
-export { Badge } from './badge/index.js';
+export { Icon } from './icon/index.js';
+export { Avatar } from './avatar/index.js';
+export { Badge } from './badge/index.js';
+export { Divider } from './divider/index.js';
+export { Clock } from './clock/index.js';
+export { Elevation } from './elevation/index.js';
+export { Button } from './button/index.js';
+export { FocusRing } from './focus-ring/index.js';
+export { Ripple } from './ripple/index.js';

package/src/link/demo/index.html

@@ -0,0 +1,34 @@
+<!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' />
+
+  <!-- Default font : Noto Sans and Noto Sans Mono -->
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <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'>
+  <a href='#' class='link with-icon'><p-icon name='home'></p-icon> link</a>
+</p>
+
+<p class='text-body'>
+  <a href='#' class='link inherit'> Testing No Style</a>
+</p>
+
+
+<script type='module' src='/dist/peacock-loader.js'></script>
+</body>
+</html>

package/src/link/link.scss

@@ -0,0 +1,24 @@
+@use "../../scss/mixin";
+
+.link {
+  border-radius: inherit;
+  corner-shape: inherit;
+
+  color: var(--color-primary);
+  --icon-color: currentColor;
+  text-decoration: none;
+
+  &:hover, &:focus-visible {
+    text-decoration: underline;
+  }
+
+  &.inherit {
+    color: inherit;
+  }
+
+  &.with-icon {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5em;
+  }
+}

package/src/peacock-loader.ts

@@ -1,55 +1,69 @@
-// Eager loaded
-import { Icon } from './icon/icon.js';
-import { Avatar } from './avatar/avatar.js';
-
-import { LoaderConfig, LoaderUtils } from './LoaderUtils.js';
-import cssComponentsStyleSheet from '../assets/tokens.css';
-import { createLinkStyles } from './link/link.css.js';
-import { createTextStyles } from './text/text.css.js';
-
-const libraryPrefix = 'p';
-
-function buildSheet(styleSheet: any) {
-  const sheet = new CSSStyleSheet();
-  // Add rules
-  sheet.replaceSync(styleSheet.toString());
-  return sheet;
-}
-
-const styleSheets = [buildSheet(cssComponentsStyleSheet)];
-
-const linkStylesheet = createLinkStyles(libraryPrefix).styleSheet;
-if (linkStylesheet) styleSheets.push(linkStylesheet);
-
-const textStylesheet = createTextStyles(libraryPrefix).styleSheet;
-if (textStylesheet) styleSheets.push(textStylesheet);
-
-function stringifyStyleSheet(stylesheet: any) {
-  // Use Array.from() to convert the CSSRuleList to an array
-  return (
-    Array.from(stylesheet.cssRules)
-      // Map each rule to its cssText property
-      .map((rule: any) => rule.cssText || '')
-      // Join all the rules with a newline character
-      .join('\\n')
-  );
-}
-
-console.log(stringifyStyleSheet(textStylesheet));
-
-document.adoptedStyleSheets = styleSheets;
-
-const loaderConfig: LoaderConfig = {
-  prefix: libraryPrefix,
-  components: {
-    icon: {
-      CustomElementClass: Icon,
-      // importPath: './component/icon.js', - for lazy load give path instead of CustomElementClass
-    },
-    avatar: {
-      CustomElementClass: Avatar,
-    },
-  },
-};
-
-new LoaderUtils(loaderConfig).start();
+// Eager loaded
+import cssComponentsStyleSheet from '@redvars/peacock-design-tokens/dist/tokens.css';
+
+import { Elevation } from './elevation/elevation.js';
+import { FocusRing } from './focus-ring/focus-ring.js';
+import { Ripple } from './ripple/ripple.js';
+
+import { Icon } from './icon/icon.js';
+import { Avatar } from './avatar/avatar.js';
+import { Badge } from './badge/badge.js';
+import { Divider } from './divider/divider.js';
+import { Button } from './button/button.js';
+
+import { LoaderConfig, LoaderUtils } from './LoaderUtils.js';
+import linkStyles from './link/link.scss';
+import textStylesheet from './text/text.scss';
+
+const libraryPrefix = 'p';
+
+function buildSheet(styleSheet: any) {
+  const sheet = new CSSStyleSheet();
+  // Add rules
+  sheet.replaceSync(styleSheet.toString());
+  return sheet;
+}
+
+const styleSheets = [
+  buildSheet(cssComponentsStyleSheet),
+  buildSheet(linkStyles),
+  buildSheet(textStylesheet),
+];
+
+document.adoptedStyleSheets = styleSheets;
+
+const loaderConfig: LoaderConfig = {
+  prefix: libraryPrefix,
+  components: {
+    icon: {
+      CustomElementClass: Icon,
+      // importPath: './component/icon.js', - for lazy load give path instead of CustomElementClass
+    },
+    'focus-ring': {
+      CustomElementClass: FocusRing,
+    },
+    avatar: {
+      CustomElementClass: Avatar,
+    },
+    badge: {
+      CustomElementClass: Badge,
+    },
+    button: {
+      CustomElementClass: Button,
+    },
+    divider: {
+      CustomElementClass: Divider,
+    },
+    elevation: {
+      CustomElementClass: Elevation,
+    },
+    clock: {
+      importPath: './clock.js',
+    },
+    ripple: {
+      CustomElementClass: Ripple,
+    },
+  },
+};
+
+new LoaderUtils(loaderConfig).start();

package/src/ripple/index.ts

@@ -0,0 +1 @@
+export { Ripple } from './ripple.js';

package/src/ripple/ripple.ts

@@ -0,0 +1,134 @@
+import { LitElement, html, css } from 'lit';
+
+export class Ripple extends LitElement {
+  static styles = css`
+    :host {
+      position: absolute;
+      inset: 0; /* top/left/bottom/right: 0 */
+      pointer-events: none; /* Let clicks pass through to parent */
+      overflow: hidden;
+      border-radius: inherit; /* Inherit parent's rounded corners */
+      z-index: 0;
+      --ripple-state-opacity: 0;
+      --ripple-pressed-color: var(--color-on-surface);
+    }
+
+    .ripple:before {
+      content: '';
+      opacity: var(--ripple-state-opacity);
+      pointer-events: none;
+      position: absolute;
+
+      background-color: var(--ripple-pressed-color);
+      inset: 0;
+      transition:
+        opacity 15ms linear,
+        background-color 15ms linear;
+    }
+
+    .ripple:after {
+      content: '';
+      opacity: var(--ripple-state-opacity);
+      pointer-events: none;
+      position: absolute;
+      background: radial-gradient(
+        closest-side,
+        var(--ripple-pressed-color) max(100% - 70px, 65%),
+        transparent 100%
+      );
+      transform-origin: center center;
+      transition: opacity 375ms linear;
+
+      width: 25px;
+      top: 0px;
+      transform: translate(51.4375px, 7.5px) scale(8.75941);
+      left: 0px;
+      height: 25px;
+    }
+
+    .ripple-effect {
+      position: absolute;
+      border-radius: 50%;
+      background-color: var(--ripple-pressed-color);
+      opacity: 0.12; /* Material 3 State Layer Opacity */
+      transform: scale(0);
+      animation: ripple-anim 600ms linear forwards;
+    }
+
+    @keyframes ripple-anim {
+      to {
+        transform: scale(1);
+        opacity: 0;
+      }
+    }
+  `;
+
+  connectedCallback() {
+    super.connectedCallback();
+    // We defer slightly to ensure the parent DOM is ready
+    requestAnimationFrame(() => {
+      this._setupParent();
+    });
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    if (this.parentElement) {
+      this.parentElement.removeEventListener('pointerdown', this._createRipple);
+    }
+  }
+
+  _setupParent() {
+    const parent = this.parentElement;
+    if (!parent) return;
+
+    // 1. Force parent to be relative so we can position absolutely inside it
+    const style = window.getComputedStyle(parent);
+    if (style.position === 'static') {
+      parent.style.position = 'relative';
+    }
+
+    // 2. Attach listener to the parent
+    parent.addEventListener('pointerdown', this._createRipple);
+  }
+
+  // Arrow function to bind 'this' automatically
+  _createRipple = (event: PointerEvent) => {
+    const parent = this.parentElement;
+    if (!parent) return;
+
+    const rect = parent.getBoundingClientRect();
+
+    // 1. Calculate diameter (furthest corner)
+    const diameter = Math.max(rect.width, rect.height) * 2.5;
+    const radius = diameter / 2;
+
+    // 2. Calculate position relative to the parent
+    const x = event.clientX - rect.left;
+    const y = event.clientY - rect.top;
+
+    // 3. Create the ripple element
+    // We create this manually to avoid triggering a full Lit render cycle
+    // for a transient, fire-and-forget animation.
+    const ripple = document.createElement('div');
+    ripple.classList.add('ripple-effect');
+
+    ripple.style.width = `${diameter}px`;
+    ripple.style.height = `${diameter}px`;
+    ripple.style.left = `${x - radius}px`;
+    ripple.style.top = `${y - radius}px`;
+
+    // 4. Append to Shadow DOM
+    this.renderRoot.appendChild(ripple);
+
+    // 5. Cleanup
+    ripple.addEventListener('animationend', () => {
+      ripple.remove();
+    });
+  };
+
+  render() {
+    // No HTML needed in the template, we inject ripples dynamically
+    return html`<div class="ripple"></div>`;
+  }
+}

package/src/styles.d.ts

@@ -1,5 +1,7 @@
 declare module '*.css' {
-  const content: Record<string, string>;
+  import { CSSResultGroup } from 'lit';
+
+  const content: Record<string, string> | CSSResultGroup;
   export default content;
 }
 

package/src/text/text.scss

@@ -0,0 +1,48 @@
+@use "../../scss/mixin";
+@use "sass:string";
+
+
+@mixin _apply-typography($value-type) {
+  @include mixin.get-typography(#{$value-type});
+  @if string.index($value-type, "body") {
+    margin-block-end: var(--spacing-200);
+  }
+  @if string.index($value-type, "headline") {
+    margin-block-end: var(--spacing-200);
+  }
+  @if string.index($value-type, "display") {
+    margin-block-end: var(--spacing-400);
+  }
+  @if string.index($value-type, "title") {
+    margin-block-end: var(--spacing-400);
+  }
+}
+
+/// Mixin to define text classes for a specific type and value-type
+/// @param {String} $type - The type name to be used in the class name (e.g., .text-#{$type})
+/// @param {String} $value-type - The value-type name to be passed to get-typography and get-margin-end
+/// @param {Boolean} $important [true] - Whether to use !important in typography properties
+@mixin define-text-classes($type, $value-type) {
+  .text-#{$type} {
+    @include _apply-typography($value-type);
+  }
+
+  .text-#{$type}-emphasized {
+    @include _apply-typography(#{$value-type}-emphasized);
+  }
+}
+
+
+/// List of typography types
+$types: "display", "headline", "body", 'code', 'label', 'title';
+
+/// List of typography sizes
+$sizes: "large", "medium", 'small';
+
+/// Generate text classes for each type and size
+@each $type in $types {
+  @include define-text-classes($type, #{$type}-medium);
+  @each $size in $sizes {
+    @include define-text-classes(#{$type}-#{$size}, #{$type}-#{$size});
+  }
+}