@redvars/peacock 3.2.10 → 3.3.1

package/readme.md

@@ -44,12 +44,12 @@ Visit [https://peacock.redvars.com](https://peacock.redvars.com) to view the doc
   <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">
 
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@redvars/peacock@3.2.9/dist/assets/styles.css"></link>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@redvars/peacock@3.3.1/dist/assets/styles.css"></link>
   <script type='module'
-          src='https://cdn.jsdelivr.net/npm/@redvars/peacock@3.2.9/dist/peacock-loader.js'></script>
+          src='https://cdn.jsdelivr.net/npm/@redvars/peacock@3.3.1/dist/peacock-loader.js'></script>
 </head>
 
-<base-button>Button</base-button>
+<wc-button>Button</wc-button>
 ```
 
 # Components
@@ -67,22 +67,22 @@ menus, checkboxes, and radio buttons.
 
 | Name                                                                | Component         | State |
 |---------------------------------------------------------------------|-------------------|-------|
-| [Code editor](https://peacock.redvars.com/components/code-editor)   | card-editor     | 🟢    |
+| [Code editor](https://peacock.redvars.com/components/code-editor)   | wc-code-editor  | 🟢    |
 | Color picker                                                        | color-picker    | 🔴    |
-| [Checkbox](https://peacock.redvars.com/components/checkbox)         | base-checkbox     | 🟢    |
-| [Date picker](https://peacock.redvars.com/components/date-picker)   | date-picker       | 🟡    |
+| [Checkbox](https://peacock.redvars.com/components/checkbox)         | wc-checkbox     | 🟢    |
+| [Date picker](https://peacock.redvars.com/components/date-picker)   | wc-date-picker  | 🟡    |
 | Date Time picker                                                    | datetime-picker | 🔴    |
-| [Form control](https://peacock.redvars.com/components/form-control) | base-field        | 🟡    |
+| [Form control](https://peacock.redvars.com/components/form-control) | wc-field        | 🟡    |
 | File picker                                                         | file-picker     | 🔴    |
 | [HTML editor](https://peacock.redvars.com/components/html-editor)   | html-editor     | 🟢    |
-| [Input](https://peacock.redvars.com/components/input)               | input-field       | 🟢    |
+| [Input](https://peacock.redvars.com/components/input)               | wc-input        | 🟢    |
 | [Input URL](https://peacock.redvars.com/components/input-url)       | input-url       | 🟢    |
 | Month picker                                                        | month-picker    | 🔴    |
-| [Number](https://peacock.redvars.com/components/number)             | number-field      | 🟢    |
-| [Select](https://peacock.redvars.com/components/select)             | base-select          | 🟢    |
-| [Textarea](https://peacock.redvars.com/components/textarea)         | textarea-field    | 🟢    |
-| [Time picker](https://peacock.redvars.com/components/time-picker)   | time-picker       | 🟡    |
-| [URL input](https://peacock.redvars.com/components/url-input)       | url-input.      | 🔴    |
+| [Number](https://peacock.redvars.com/components/number)             | wc-number-field | 🟢    |
+| [Select](https://peacock.redvars.com/components/select)             | base-select     | 🟢    |
+| [Textarea](https://peacock.redvars.com/components/textarea)         | wc-textarea     | 🟢    |
+| [Time picker](https://peacock.redvars.com/components/time-picker)   | wc-time-picker  | 🟡    |
+| [URL input](https://peacock.redvars.com/components/url-input)       | url-input       | 🔴    |
 | Week picker                                                         | week-picker     | 🔴    |
 
 ## Navigation
@@ -93,10 +93,10 @@ include menus, tabs, and breadcrumbs.
 
 | Name                                                   | Component       | State |
 |--------------------------------------------------------|-----------------|-------|
-| [Breadcrumb](https://peacock.redvars.com/components/breadcrumb) | base-breadcrumb | 🟢    |
+| [Breadcrumb](https://peacock.redvars.com/components/breadcrumb) | wc-breadcrumb   | 🟢    |
 | [Dropdown](https://peacock.redvars.com/components/dropdown)     | base-dropdown   | 🟡    |
-| [Menu](https://peacock.redvars.com/components/menu)             | base-menu       | 🟡    |
-| [Tabs](https://peacock.redvars.com/components/tabs)             | base-tabs       | 🟢    |
+| [Menu](https://peacock.redvars.com/components/menu)             | wc-base-menu    | 🟡    |
+| [Tabs](https://peacock.redvars.com/components/tabs)             | wc-tabs         | 🟢    |
 
 ## Informational
 
@@ -106,11 +106,11 @@ include notifications, tooltips, and progress bars.
 
 | Name                                                                                | Component              | State |
 |-------------------------------------------------------------------------------------|------------------------|-------|
-| [Badge](https://peacock.redvars.com/components/badge)                               | base-badge             | 🟢    |
-| [Linear Progress](https://peacock.redvars.com/components/linear-progress)           | linear-progress        | 🟢    |
-| [Circular Progress](https://peacock.redvars.com/components/circular-progress)       | circular-progress      | 🟢    |
-| [Spinner](https://peacock.redvars.com/components/spinner)                           | base-spinner              | 🟢    |
-| [Tooltip](https://peacock.redvars.com/components/tooltip)                           | base-tooltip           | 🟢    |
+| [Badge](https://peacock.redvars.com/components/badge)                               | wc-badge                  | 🟢    |
+| [Linear Progress](https://peacock.redvars.com/components/linear-progress)           | wc-linear-progress        | 🟢    |
+| [Circular Progress](https://peacock.redvars.com/components/circular-progress)       | wc-circular-progress      | 🟢    |
+| [Spinner](https://peacock.redvars.com/components/spinner)                           | wc-spinner                | 🟢    |
+| [Tooltip](https://peacock.redvars.com/components/tooltip)                           | wc-tooltip                | 🟢    |
 | [Notification](https://peacock.redvars.com/components/notification)                 | base-notification         | 🟢    |
 | [Notification Manager](https://peacock.redvars.com/components/notification-manager) | base-notification-manager | 🟢    |
 
@@ -123,8 +123,8 @@ organization to the content.
 
 | Name                                                          | Component      | State |
 |---------------------------------------------------------------|----------------|-------|
-| [Accordion](https://peacock.redvars.com/components/accordion) | base-accordion | 🟢    |
-| Card                                                          | base-card         | 🟡    |
+| [Accordion](https://peacock.redvars.com/components/accordion) | wc-accordion   | 🟢    |
+| Card                                                          | base-card      | 🟡    |
 
 ## General
 
@@ -132,34 +132,34 @@ These components are used for general purpose. They include
 
 | Name                                                                                | Component                 | State |
 |-------------------------------------------------------------------------------------|---------------------------|-------|
-| [Avatar](https://peacock.redvars.com/components/avatar)                             | base-avatar               | 🟢    |
-| [Button](https://peacock.redvars.com/components/button)                             | base-button               | 🟢    |
-| [Button Group](https://peacock.redvars.com/components/button-group)                 | button-group         | 🟢    |
+| [Avatar](https://peacock.redvars.com/components/avatar)                             | wc-avatar                 | 🟢    |
+| [Button](https://peacock.redvars.com/components/button)                             | wc-button                 | 🟢    |
+| [Button Group](https://peacock.redvars.com/components/button-group)                 | wc-button-group           | 🟢    |
 | [Calendar](https://peacock.redvars.com/components/calendar)                         | base-calendar             | 🟢    |
 | Card Select                                                                         | base-cardselect           | 🔴    |
-| [Code Highlighter](https://peacock.redvars.com/components/code-highlighter)         | code-highlighter     | 🟢    |
+| [Code Highlighter](https://peacock.redvars.com/components/code-highlighter)         | wc-code-highlighter       | 🟢    |
 | Column                                                                              | base-col                  | 🔴    |
-| [Empty State](https://peacock.redvars.com/components/empty-state)                   | empty-state          | 🟡    |
-| [Flow Designer ](https://peacock.redvars.com/components/flow-designer)              | flow-designer        | 🔵    |
+| [Empty State](https://peacock.redvars.com/components/empty-state)                   | wc-empty-state            | 🟡    |
+| [Flow Designer ](https://peacock.redvars.com/components/flow-designer)              | flow-designer             | 🔵    |
 | Grid                                                                                | base-grid                 | 🔴    |
 | Group                                                                               | base-group                | 🔴    |
 | [Header](https://peacock.redvars.com/components/header)                             | base-header               | 🟢    |
-| [Icon](https://peacock.redvars.com/components/icon)                                 | base-icon                 | 🟢    |
-| [Link](https://peacock.redvars.com/components/link)                                 | base-link                 | 🟢    |
+| [Icon](https://peacock.redvars.com/components/icon)                                 | wc-icon                   | 🟢    |
+| [Link](https://peacock.redvars.com/components/link)                                 | wc-link                   | 🟢    |
 | [Modal](https://peacock.redvars.com/components/modal)                               | base-modal                | 🟢    |
-| [Notification Manager](https://peacock.redvars.com/components/notification-manager) | notification-manager | 🟡    |
+| [Notification Manager](https://peacock.redvars.com/components/notification-manager) | notification-manager      | 🟡    |
 | Observer                                                                            | base-observer             | 🔴    |
-| Pagination                                                                          | base-pagination           | 🔴    |
+| Pagination                                                                          | wc-pagination             | 🔴    |
 | Radio Group                                                                         | base-radiogroup           | 🔴    |
 | Row                                                                                 | base-row                  | 🔴    |
-| [Slider](https://peacock.redvars.com/components/slider)                             | base-slider               | 🟡    |
+| [Slider](https://peacock.redvars.com/components/slider)                             | wc-slider                 | 🟡    |
 | Spoiler                                                                             | base-spoiler              | 🔴    |
 | Stepper                                                                             | base-stepper              | 🔴    |
-| [Table](https://peacock.redvars.com/components/table)                               | base-table                | 🟡    |
-| [Tag](https://peacock.redvars.com/components/tag) / Chip                            | base-tag                  | 🟢    |
+| [Table](https://peacock.redvars.com/components/table)                               | wc-table                  | 🟡    |
+| [Tag](https://peacock.redvars.com/components/tag) / Chip                            | wc-tag                    | 🟢    |
 | [Text](https://peacock.redvars.com/components/text)                                 | base-text                 | 🟢    |
-| [Tree View](https://peacock.redvars.com/components/tree-view)                       | tree-view            | 🟡    |
-| [Switch](https://peacock.redvars.com/components/switch)                             | base-switch               | 🟢    |
+| [Tree View](https://peacock.redvars.com/components/tree-view)                       | wc-tree-view              | 🟡    |
+| [Switch](https://peacock.redvars.com/components/switch)                             | wc-switch                 | 🟢    |
 
 ## Charts
 
@@ -167,8 +167,8 @@ These components are used to display data in a graphical format. They include
 
 | Name                                                           | Component           | State |
 |----------------------------------------------------------------|---------------------|-------|
-| [Doughnut Chart](https://peacock.redvars.com/components/chart-doughnut) | chart-doughnut | 🟢    |
-| [Pie Chart ](https://peacock.redvars.com/components/chart-pie)          | chart-pie      | 🟢    |
+| [Doughnut Chart](https://peacock.redvars.com/components/chart-doughnut) | wc-chart-doughnut | 🟢    |
+| [Pie Chart ](https://peacock.redvars.com/components/chart-pie)          | wc-chart-pie      | 🟢    |
 
 
 ## 📄 License

package/src/{PeacockComponent.ts → IndividualComponent.ts}

@@ -1,3 +1,3 @@
 // Class decorator
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-export default function PeacockComponent(constructor: Function) {}
+export default function IndividualComponent(constructor: Function) {}

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,16 @@ 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.
- *
+ * @parentRawTag accordion
+ * 
  * @example
  * ```html
- * <base-accordion-item>
+ * <wc-accordion-item>
  * Testing
- * </accordion-item>
+ * </wc-accordion-item>
  * ```
  * @tags display
  */
@@ -80,7 +81,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

@@ -1,31 +1,33 @@
 import { html, LitElement } from 'lit';
 import { property } from 'lit/decorators.js';
 import styles from './breadcrumb.scss';
+import { BreadcrumbItem } from '../breadcrumb-item/breadcrumb-item.js';
 
 /**
  * @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];
 
+  static Item = BreadcrumbItem;
+
   /**
    * Accessible label for the breadcrumb navigation landmark.
    * @default "Breadcrumb"

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

@@ -6,15 +6,16 @@ import styles from './breadcrumb-item.scss';
 
 /**
  * @label Breadcrumb Item
- * @tag breadcrumb-item
+ * @tag wc-breadcrumb-item
  * @rawTag breadcrumb-item
+ * @parentRawTag breadcrumb
  * @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,6 +64,7 @@ slot::slotted(*) {
     justify-content: center;
     gap: var(--_button-icon-label-spacing);
     width: 100%;
+    height: 100%;
     z-index: 0;
 
     color: var(--_label-text-color);
@@ -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,33 +1,39 @@
 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';
+import { Button } from '../button/button.js';
+import { IconButton } from '../icon-button/icon-button.js';
 
 /**
  * @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)
   // that can import .scss files as lit-css.
   static styles = [styles];
 
+  static Button = Button;
+
+  static IconButton = IconButton;
+
   /**
    * Button size.
    * Possible values are `"sm"`, `"md"`, `"lg"`. Defaults to `"md"`.

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');
+}