@redvars/peacock 3.3.0 → 3.3.2

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.3.0/dist/assets/styles.css"></link>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@redvars/peacock@3.3.2/dist/assets/styles.css"></link>
   <script type='module'
-          src='https://cdn.jsdelivr.net/npm/@redvars/peacock@3.3.0/dist/peacock-loader.js'></script>
+          src='https://cdn.jsdelivr.net/npm/@redvars/peacock@3.3.2/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/accordion/accordion-item.ts

@@ -8,7 +8,8 @@ import styles from './accordion-item.scss';
  * @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
  * <wc-accordion-item>

package/src/breadcrumb/breadcrumb/breadcrumb.ts

@@ -1,6 +1,7 @@
 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
@@ -25,6 +26,8 @@ import styles from './breadcrumb.scss';
 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

@@ -8,6 +8,7 @@ import styles from './breadcrumb-item.scss';
  * @label 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
  *

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

@@ -3,6 +3,8 @@ import { property } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.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
@@ -28,6 +30,10 @@ export class ButtonGroup extends LitElement {
   // 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/card/card.scss

@@ -0,0 +1,61 @@
+:host {
+  display: block;
+  --card-background: var(--color-surface, #ffffff);
+  --card-border-color: transparent;
+  --card-shadow: none;
+  --card-shape: var(--global-shape-corner-large, 1rem);
+  --card-padding: 1rem;
+  --card-gap: 0;
+}
+
+.card {
+  display: flex;
+  flex-direction: column;
+  gap: var(--card-gap);
+  background: var(--card-background);
+  border-radius: var(--card-shape);
+  border: 1px solid var(--card-border-color);
+  box-shadow: var(--card-shadow);
+  color: var(--color-on-surface, inherit);
+  padding: var(--card-padding);
+  transition: box-shadow 150ms ease, transform 150ms ease;
+}
+
+:host([variant='elevated']) {
+  --card-background: var(--color-surface-container-low, #fdfcfe);
+  --card-shadow: var(--shadow-sm, 0px 1px 3px rgba(16, 24, 40, 0.1), 0px 1px 2px rgba(16, 24, 40, 0.06));
+}
+
+:host([variant='filled']) {
+  --card-background: var(--color-surface-container-highest, #f5f5f5);
+  --card-shadow: none;
+}
+
+:host([variant='outlined']) {
+  --card-border-color: var(--color-outline, rgba(0, 0, 0, 0.12));
+  --card-shadow: none;
+}
+
+:host([elevation='0']) {
+  --card-shadow: none;
+}
+
+:host([elevation='1']) {
+  --card-shadow: var(--shadow-sm, 0px 1px 3px rgba(16, 24, 40, 0.1), 0px 1px 2px rgba(16, 24, 40, 0.06));
+}
+
+:host([elevation='2']) {
+  --card-shadow: var(--shadow-md, 0px 4px 8px -2px rgba(16, 24, 40, 0.1), 0px 2px 4px -2px rgba(16, 24, 40, 0.06));
+}
+
+:host([elevation='3']) {
+  --card-shadow: var(--shadow-lg, 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03));
+}
+
+:host([elevation='4']) {
+  --card-shadow: var(--shadow-xl, 0px 20px 24px -4px rgba(16, 24, 40, 0.08), 0px 8px 8px -4px rgba(16, 24, 40, 0.03));
+}
+
+:host([elevation='5']) {
+  --card-shadow: var(--shadow-xxl, 0px 24px 48px -12px rgba(16, 24, 40, 0.18));
+}

package/src/card/card.ts

@@ -0,0 +1,38 @@
+import { LitElement, html } from 'lit';
+import { property } from 'lit/decorators.js';
+import IndividualComponent from '../IndividualComponent.js';
+import styles from './card.scss';
+
+type CardVariant = 'elevated' | 'filled' | 'outlined';
+type CardElevation = 0 | 1 | 2 | 3 | 4 | 5;
+/**
+ * @label Card
+ * @tag wc-card
+ * @rawTag card
+ * @summary A Material 3 inspired card surface for grouping related content.
+ * @cssprop --card-padding - Inner padding for the card container. Defaults to 1rem.
+ * @cssprop --card-shape - Corner radius for the card container. Defaults to a large radius.
+ * @cssprop --card-gap - Gap between slotted children.
+ *
+ * @example
+ * ```html
+ * <wc-card variant="outlined">
+ *   <h3>Title</h3>
+ *   <p>Supportive text</p>
+ * </wc-card>
+ * ```
+ */
+@IndividualComponent
+export class Card extends LitElement {
+  static styles = [styles];
+
+  @property({ type: String, reflect: true })
+  variant: CardVariant = 'elevated';
+
+  @property({ type: Number, reflect: true })
+  elevation: CardElevation = 1;
+
+  render() {
+    return html`<div class="card"><slot></slot></div>`;
+  }
+}

package/src/card/index.ts

@@ -0,0 +1 @@
+export { Card } from './card.js';

package/src/chart-bar/chart-bar.scss

@@ -0,0 +1,58 @@
+@use '../../scss/mixin';
+
+@include mixin.base-styles;
+
+:host {
+  display: block;
+  color: var(--color-on-surface);
+}
+
+.chart-frame {
+  background: var(--color-surface-container-low);
+  border: 1px solid var(--color-outline-variant);
+  border-radius: var(--shape-corner-medium);
+  padding: var(--spacing-300);
+  box-shadow: var(--md-sys-elevation-1);
+}
+
+svg {
+  width: 100%;
+  height: 100%;
+}
+
+.axis-label {
+  @include mixin.get-typography('label-medium');
+  fill: var(--color-on-surface-variant);
+}
+
+.value-label {
+  @include mixin.get-typography('label-small');
+  fill: var(--color-on-surface);
+}
+
+.gridline {
+  stroke: var(--color-outline-variant);
+  opacity: 0.6;
+}
+
+.legend {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--spacing-200);
+  margin-top: var(--spacing-200);
+  color: var(--color-on-surface);
+  @include mixin.get-typography('label-medium');
+
+  .legend-item {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--spacing-150);
+
+    .swatch {
+      width: 12px;
+      height: 12px;
+      border-radius: var(--shape-corner-full);
+      border: 1px solid var(--color-outline-variant);
+    }
+  }
+}