@redvars/peacock 3.2.9 → 3.3.0

package/src/accordion/{accordion-item/accordion-item.scss → accordion-item.scss}

@@ -1,4 +1,4 @@
-@use '../../../scss/mixin';
+@use '../../scss/mixin';
 
 
 @include mixin.base-styles;

package/src/accordion/{accordion-item/accordion-item.ts → accordion-item.ts}

@@ -5,15 +5,15 @@ import styles from './accordion-item.scss';
 
 /**
  * @label Accordion Item
- * @tag accordion-item
- * @rawTag accordion
+ * @tag wc-accordion-item
+ * @rawTag accordion-item
  * @summary An accordion item is single item in an accordion list. It contains a header and a content section that can be expanded or collapsed by the user.
  *
  * @example
  * ```html
- * <base-accordion-item>
+ * <wc-accordion-item>
  * Testing
- * </accordion-item>
+ * </wc-accordion-item>
  * ```
  * @tags display
  */
@@ -80,7 +80,7 @@ export class AccordionItem extends LitElement {
         @click=${this.__handleToggle}
         aria-expanded=${this.open}
       >
-        <base-icon class="accordion-icon" name="keyboard_arrow_down"></base-icon>
+        <wc-icon class="accordion-icon" name="keyboard_arrow_down"></wc-icon>
         <div part="title" class="accordion-title">
           <slot name="heading">${this.heading}</slot>
         </div>

package/src/accordion/{accordion/accordion.scss → accordion.scss}

@@ -1,4 +1,4 @@
-@use '../../../scss/mixin';
+@use '../../scss/mixin';
 
 @include mixin.base-styles;
 
@@ -11,5 +11,6 @@ slot::slotted(:not(:last-child)) {
 }
 
 slot::slotted(:last-child) {
+  border-block-start: 1px solid var(--color-outline);
   border-block-end: 1px solid var(--color-outline);
 }

package/src/accordion/{accordion/accordion.ts → accordion.ts}

@@ -1,21 +1,21 @@
 import { html, LitElement } from 'lit';
 import { property, queryAssignedElements } from 'lit/decorators.js';
 import styles from './accordion.scss';
-import { AccordionItem } from '../accordion-item/accordion-item.js';
+import { AccordionItem } from './accordion-item.js';
 
 /**
  * @label Accordion
- * @tag base-accordion
+ * @tag wc-accordion
  * @rawTag accordion
  * @summary An accordion is a vertically stacked list of headers that reveal or hide associated sections of content.
  *
  * @example
  * ```html
- * <base-accordion>
- *     <accordion-item heading="Accordion">
+ * <wc-accordion>
+ *     <wc-accordion-item heading="Accordion">
  *         Content
- *     </accordion-item>
- * </base-accordion>
+ *     </wc-accordion-item>
+ * </wc-accordion>
  * ```
  * @tags display
  */

package/src/accordion/{accordion-item/index.ts → index.ts}

@@ -1 +1,3 @@
 export { AccordionItem } from './accordion-item.js';
+export { Accordion } from './accordion.js';
+

package/src/avatar/avatar.ts

@@ -5,7 +5,7 @@ import styles from './avatar.scss';
 
 /**
  * @label Avatar
- * @tag base-avatar
+ * @tag wc-avatar
  * @rawTag avatar
  * @summary The Avatar component is used to represent user, and displays the profile picture, initials or fallback icon.
  *
@@ -17,7 +17,7 @@ import styles from './avatar.scss';
  *
  * @example
  * ```html
- * <base-avatar name="Shivaji Varma" src="https://peacock.redvars.com/assets/img/avatar.xs.webp" style='--avatar-size: 4rem'></base-avatar>
+ * <wc-avatar name="Shivaji Varma" src="https://peacock.redvars.com/assets/img/avatar.xs.webp" style='--avatar-size: 4rem'></wc-avatar>
  * ```
  *
  * @tags display

package/src/badge/badge.ts

@@ -5,7 +5,7 @@ import styles from './badge.scss';
 
 /**
  * @label Badge
- * @tag base-badge
+ * @tag wc-badge
  * @rawTag badge
  * @summary The badge component is used to display a small amount of information to the user.
  *
@@ -13,7 +13,7 @@ import styles from './badge.scss';
  *
  * @example
  * ```html
- * <base-badge value="1"></base-badge>
+ * <wc-badge value="1"></wc-badge>
  * ```
  * @tags display
  */

package/src/breadcrumb/breadcrumb/breadcrumb.ts

@@ -4,24 +4,23 @@ import styles from './breadcrumb.scss';
 
 /**
  * @label Breadcrumb
- * @tag base-breadcrumb
+ * @tag wc-breadcrumb
  * @rawTag breadcrumb
- *
  * @summary A breadcrumb is a secondary navigation scheme that reveals the user's location in a website or web application.
  * @overview
  *  - Breadcrumbs provide a trail for users to follow back to the starting or entry point.
  *  - They help users understand their current location within the site hierarchy.
  *  - Follows WCAG 2.1 guidelines for accessible navigation landmarks.
+ * @tags navigation
  *
  * @example
  * ```html
- * <base-breadcrumb label="Breadcrumb">
- *   <breadcrumb-item href="#">Home</breadcrumb-item>
- *   <breadcrumb-item href="#">Category</breadcrumb-item>
- *   <breadcrumb-item active>Current Page</breadcrumb-item>
- * </base-breadcrumb>
+ * <wc-breadcrumb label="Breadcrumb">
+ *   <wc-breadcrumb-item href="#">Home</wc-breadcrumb-item>
+ *   <wc-breadcrumb-item href="#">Category</wc-breadcrumb-item>
+ *   <wc-breadcrumb-item active>Current Page</wc-breadcrumb-item>
+ * </wc-breadcrumb>
  * ```
- * @tags navigation
  */
 export class Breadcrumb extends LitElement {
   static styles = [styles];

package/src/breadcrumb/breadcrumb-item/breadcrumb-item.ts

@@ -6,15 +6,15 @@ import styles from './breadcrumb-item.scss';
 
 /**
  * @label Breadcrumb Item
- * @tag breadcrumb-item
+ * @tag wc-breadcrumb-item
  * @rawTag breadcrumb-item
  * @summary A breadcrumb item component that represents a single item in a breadcrumb navigation.
+ * @tags navigation
  *
  * @example
  * ```html
- * <breadcrumb-item href="#">Home</breadcrumb-item>
+ * <wc-breadcrumb-item href="#">Home</wc-breadcrumb-item>
  * ```
- * @tags navigation
  */
 export class BreadcrumbItem extends LitElement {
   static styles = [styles];

package/src/button/BaseButton.ts

@@ -199,7 +199,7 @@ export class BaseButton extends LitElement {
 
   __renderTooltip() {
     if (this.tooltip) {
-      return html`<base-tooltip for="button">${this.tooltip}</base-tooltip>`;
+      return html`<wc-tooltip for="button">${this.tooltip}</wc-tooltip>`;
     }
     return nothing;
   }

package/src/button/button/button.scss

@@ -30,7 +30,7 @@ slot::slotted(*) {
 /*
   * Reset native button/link styles
   */
-.button.button-element {
+.button-element {
   background: transparent;
   border: none;
   appearance: none;
@@ -41,7 +41,7 @@ slot::slotted(*) {
 
 .button {
   position: relative;
-  display: inline-flex;
+  display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
@@ -64,7 +64,8 @@ slot::slotted(*) {
     justify-content: center;
     gap: var(--_button-icon-label-spacing);
     width: 100%;
-    z-index: 1;
+    height: 100%;
+    z-index: 0;
 
     color: var(--_label-text-color);
     opacity: var(--_label-text-opacity, 1);
@@ -158,23 +159,6 @@ slot::slotted(*) {
     height: 100%;
     pointer-events: none;
     transform: translateX(0.25rem) translateY(0.25rem);
-
-    &:before {
-      z-index: 0;
-      content: "";
-      position: absolute;
-      pointer-events: none;
-      border-start-start-radius: var(--_container-shape-start-start);
-      border-start-end-radius: var(--_container-shape-start-end);
-      border-end-start-radius: var(--_container-shape-end-start);
-      border-end-end-radius: var(--_container-shape-end-end);
-      corner-shape: var(--_container-corner-shape-variant);
-      width: 100%;
-      height: 100%;
-      background: white;
-      left: 0;
-      transform: translateX(-0.25rem) translateY(-0.25rem);
-    }
   }
 
   .outline {
@@ -395,17 +379,19 @@ slot::slotted(*) {
     display: block;
   }
 
+  .focus-ring {
+    --focus-ring-color: var(--color-primary-container);
+    --focus-ring-inset: -2px;
+  }
+
   .ripple {
     display: none;
   }
 
   &.pressed:not(:where(.disabled, .soft-disabled, .show-skeleton)) {
-    .background, .button-content, .outline {
+    .background, .button-content, .outline, .focus-ring {
       transform: translateX(0.25rem) translateY(0.25rem);
     }
-    .neo-background:before {
-      transform: translateX(0) translateY(0);
-    }
   }
 
   &.disabled {

package/src/button/button/button.ts

@@ -1,7 +1,7 @@
 import { html } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
-import PeacockComponent from 'src/PeacockComponent.js';
+import IndividualComponent from 'src/IndividualComponent.js';
 import styles from './button.scss';
 import colorStyles from './button-colors.scss';
 import sizeStyles from './button-sizes.scss';
@@ -11,7 +11,7 @@ import { BaseButton } from '../BaseButton.js';
 
 /**
  * @label Button
- * @tag base-button
+ * @tag wc-button
  * @rawTag button
  *
  * @summary Buttons help people initiate actions, from sending an email, to sharing a document, to liking a post.
@@ -47,11 +47,11 @@ import { BaseButton } from '../BaseButton.js';
  *
  * @example
  * ```html
- * <base-button>Button</base-button>
+ * <wc-button>Button</wc-button>
  * ```
  * @tags display
  */
-@PeacockComponent
+@IndividualComponent
 export class Button extends BaseButton {
   static override styles = [styles, colorStyles, sizeStyles];
 
@@ -138,13 +138,13 @@ export class Button extends BaseButton {
 
   renderButtonContent() {
     return html`
-      <focus-ring class="focus-ring" .control=${this} element="buttonElement"></focus-ring>
-      <base-elevation class="elevation"></base-elevation>
+      <wc-focus-ring class="focus-ring" .control=${this} element="buttonElement"></wc-focus-ring>
+      <wc-elevation class="elevation"></wc-elevation>
       <div class="neo-background"></div>
       <div class="background"></div>
       <div class="outline"></div>
-      <base-ripple class="ripple"></base-ripple>
-      <base-skeleton class="skeleton"></base-skeleton>
+      <wc-ripple class="ripple"></wc-ripple>
+      <wc-skeleton class="skeleton"></wc-skeleton>
 
       <div class="button-content">
         <div class="slot-container">

package/src/button/button-group/button-group.ts

@@ -1,27 +1,27 @@
 import { html, LitElement } from 'lit';
 import { property } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
-import PeacockComponent from 'src/PeacockComponent.js';
+import IndividualComponent from 'src/IndividualComponent.js';
 import styles from './button-group.scss';
 
 /**
  * @label Button Group
- * @tag button-group
+ * @tag wc-button-group
  * @rawTag button-group
  *
  * @summary Group a series of buttons together on a single line with the button group, and super-power.
 
  * @example
  * ```html
- * <button-group>
- *  <icon-button name="home"></icon-button>
- *  <icon-button name="alarm"></icon-button>
- * </button-group>
+ * <wc-button-group>
+ *  <wc-icon-button name="home"></wc-icon-button>
+ *  <wc-icon-button name="alarm"></wc-icon-button>
+ * </wc-button-group>
  * ```
  *
  * @tags controls
  */
-@PeacockComponent
+@IndividualComponent
 export class ButtonGroup extends LitElement {
   // Lit prefers CSS-in-JS for better performance and scoping.
   // If you prefer keeping the SCSS file, you'll need a build tool (like Vite or Webpack)

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

@@ -11,7 +11,7 @@ import { throttle } from '../../utils.js';
 
 /**
  * @label Icon Button
- * @tag icon-button
+ * @tag wc-icon-button
  * @rawTag icon-button
  *
  * @summary Icon buttons allow users to take actions, and make choices, with a single tap.
@@ -48,7 +48,7 @@ import { throttle } from '../../utils.js';
  *
  * @example
  * ```html
- * <icon-button name="home"></icon-button>
+ * <wc-icon-button name="home"></wc-icon-button>
  * ```
  * @tags display
  */
@@ -133,20 +133,20 @@ export class IconButton extends BaseButton {
 
   renderButtonContent() {
     return html`
-      <focus-ring class="focus-ring" .control=${this} element="buttonElement"></focus-ring>
-      <base-elevation class="elevation"></base-elevation>
+      <wc-focus-ring class="focus-ring" .control=${this} element="buttonElement"></wc-focus-ring>
+      <wc-elevation class="elevation"></wc-elevation>
       <div class="neo-background"></div>
       <div class="background"></div>
       <div class="outline"></div>
-      <base-ripple class="ripple"></base-ripple>
-      <base-skeleton class="skeleton"></base-skeleton>
+      <wc-ripple class="ripple"></wc-ripple>
+      <wc-skeleton class="skeleton"></wc-skeleton>
 
       <div class="button-content">
-        <base-icon
+        <wc-icon
           name=${this.name}
           src=${this.src}
           provider=${this.provider}
-        ></base-icon>
+        ></wc-icon>
       </div>
 
       ${this.__renderDisabledReason()}

package/src/chart-donut/chart-donut.scss

@@ -0,0 +1,37 @@
+@use '../../scss/mixin';
+
+@include mixin.base-styles;
+
+:host {
+  display: inline-block;
+}
+
+.title {
+  @include mixin.get-typography('title-large-emphasized');
+  fill: var(--color-on-surface);
+}
+
+.label {
+  @include mixin.get-typography('title-medium');
+  fill: var(--color-on-surface);
+}
+
+.arc {
+  cursor: pointer;
+  transition: filter 150ms ease;
+
+  &:hover {
+    filter: brightness(1.2);
+  }
+}
+
+.item-polyline {
+  fill: none;
+  stroke-width: 1;
+  stroke: var(--color-on-surface);
+}
+
+.item-label {
+  fill: var(--color-on-surface);
+  @include mixin.get-typography('label-medium');
+}