@redvars/peacock 3.6.1 → 3.6.2

package/dist/{navigation-rail-DTTkqohi.js → navigation-rail-CD7IrqbN.js}

@@ -5,13 +5,13 @@ import { r } from './state-DwbEjqVk.js';
 import { o as observerSlotChangesWithCallback } from './observe-slot-change-BGJfgg2E.js';
 import { a as e, e as e$2 } from './query-QBcUV-L_.js';
 import { B as BaseHyperlinkMixin, t as throttle } from './BaseHyperlinkMixin-BNuwbiEf.js';
-import { o as o$1 } from './style-map-DVmWOuYy.js';
+import { B as BaseButton, o as o$1, s as spread, a as BaseButtonMixin } from './BaseButton-BNFAYn-S.js';
+import { o as o$2 } from './style-map-DVmWOuYy.js';
 import { r as redispatchEvent, i as isActivationClick, d as dispatchActivationClick } from './dispatch-event-utils-CuEqjlPT.js';
-import { s as spread, o as o$2, a as BaseButtonMixin } from './BaseButton-BNFAYn-S.js';
 import { B as BaseInput } from './BaseInput-14YmcfK7.js';
-import { F as FloatingController } from './popover-NC7b1lTq.js';
+import { F as FloatingController } from './popover-DUPmMVWS.js';
 import { i as isDarkMode, o as observeThemeChange } from './is-dark-mode-DOcaw4Yq.js';
-import { f as fetchSVG, s as sanitizeSvg, o as o$3 } from './flow-designer-DvTUrDp5.js';
+import { f as fetchSVG, s as sanitizeSvg, o as o$3 } from './icon-CueRR7wx.js';
 import { o as o$4 } from './unsafe-html-BsGUjx94.js';
 
 /**
@@ -32,9 +32,9 @@ var css_248z$U = i`* {
   display: inline-block;
   pointer-events: none;
   --avatar-size: 2rem;
-  --avatar-background-color: var(--color-primary);
+  --avatar-container-color: var(--color-primary);
   --avatar-text-color: var(--color-on-primary);
-  --avatar-border-radius: var(--global-avatar-border-radius);
+  --avatar-container-shape: var(--global-avatar-container-shape);
 }
 
 .avatar-container {
@@ -45,7 +45,7 @@ var css_248z$U = i`* {
 }
 
 .avatar {
-  border-radius: var(--avatar-border-radius);
+  border-radius: var(--avatar-container-shape);
   display: flex;
   justify-content: center;
   align-items: center;
@@ -57,7 +57,7 @@ var css_248z$U = i`* {
   font-weight: var(--typography-body-large-emphasized-font-weight) !important;
   line-height: var(--typography-body-large-emphasized-line-height) !important;
   letter-spacing: var(--typography-body-large-emphasized-letter-spacing) !important;
-  background-color: var(--avatar-background-color);
+  background-color: var(--avatar-container-color);
   font-size: calc(var(--avatar-size) * 0.5) !important;
 }
 .avatar .image {
@@ -74,7 +74,7 @@ var css_248z$U = i`* {
  * @summary The Avatar component is used to represent user, and displays the profile picture, initials or fallback icon.
  *
  * @cssprop --avatar-border-radius - Controls the border radius of the avatar.
- * @cssprop --avatar-background-color - Controls the color of the avatar.
+ * @cssprop --avatar-container-color - Controls the color of the avatar container.
  * @cssprop --avatar-size - Controls the size of the avatar.
  * @cssprop --avatar-text-color - Controls the color of the text inside the avatar.
  *
@@ -2238,24 +2238,32 @@ var css_248z$H = i`* {
   display: inline-block;
   --chip-container-color: var(--color-surface);
   --chip-label-text-color: var(--color-on-surface);
-  --chip-outline-color: var(--color-outline);
+  --chip-outline-color: var(--color-outline-variant);
   --chip-container-shape: var(--shape-corner-small);
+  --chip-container-padding: 1rem;
+  /* 8dp */
 }
 
-:host-context([data-theme=dark]) {
-  --chip-hover-color: var(--color-primary-30);
+/*
+  * Reset native button/link styles
+  */
+.button {
+  background: transparent;
+  border: none;
+  appearance: none;
+  margin: 0;
+  padding: 0;
+  outline: none;
+  text-decoration: none;
 }
 
 .chip {
   position: relative;
   display: inline-flex;
-  flex-direction: column;
   align-items: center;
-  justify-content: center;
   height: var(--chip-height, var(--_chip-height, 2rem));
-  padding: 0 var(--_container-padding, 1rem);
   width: 100%;
-  border-radius: var(--chip-container-shape);
+  cursor: pointer;
 }
 .chip .tag-content {
   position: relative;
@@ -2264,41 +2272,74 @@ var css_248z$H = i`* {
   text-overflow: ellipsis;
   white-space: nowrap;
   max-width: 100%;
+  height: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
-  color: var(--chip-label-text-color);
-  font-family: var(--typography-label-small-font-family) !important;
-  font-size: var(--typography-label-small-font-size) !important;
-  font-weight: var(--typography-label-small-font-weight) !important;
-  line-height: var(--typography-label-small-line-height) !important;
-  letter-spacing: var(--typography-label-small-letter-spacing) !important;
-  gap: 0.5rem;
+  padding-inline: var(--chip-container-padding);
+  color: var(--_chip-text-color);
+  opacity: var(--_chip-text-opacity, 1);
+  font-family: var(--typography-label-large-font-family) !important;
+  font-size: var(--typography-label-large-font-size) !important;
+  font-weight: var(--typography-label-large-font-weight) !important;
+  line-height: var(--typography-label-large-line-height) !important;
+  letter-spacing: var(--typography-label-large-letter-spacing) !important;
 }
-.chip .tag-content .tag-image {
-  width: 1.125rem;
-  height: 1.125rem;
-  border-radius: 100%;
-  background: var(--chip-hover-color);
+.chip .tag-content .label-container {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
-.chip .close-btn {
-  border-radius: 12px;
+.chip .tag-content .close-btn {
+  height: 100%;
   padding: 0;
+  padding-inline: calc(var(--chip-container-padding) / 2);
   margin: 0;
   border: none;
   background: transparent;
   line-height: 0;
   cursor: pointer;
-  --icon-size: 1rem;
 }
-.chip .close-btn .close-btn-icon {
+.chip .tag-content .close-btn .close-btn-icon {
   --icon-size: 1rem;
+  --icon-color: var(--_chip-text-color);
 }
-.chip .close-btn:hover {
+.chip .tag-content .close-btn:hover {
   background: var(--chip-hover-color);
 }
-.chip .close-btn:hover .close-btn-icon {
-  color: var(--background);
+.chip .tag-content .icon-slot-container {
+  height: 100%;
+  display: flex;
+  align-items: center;
+  --icon-size: 1rem;
+  --icon-color: var(--color-primary);
+}
+.chip .focus-ring {
+  z-index: 2;
+  display: block;
+  --focus-ring-container-shape: var(--chip-container-shape);
+}
+.chip .ripple {
+  display: block;
+  border-radius: var(--chip-container-shape);
+  --ripple-state-opacity: var(--_chip-state-opacity, 0);
+  --ripple-pressed-color: var(--_chip-state-color);
+}
+.chip.disabled {
+  cursor: not-allowed;
+}
+.chip.dismissible .tag-content {
+  padding-inline-end: 0;
+}
+.chip.dismissible.actionable .tag-content {
+  padding-inline-end: calc(var(--chip-container-padding) / 2);
+}
+.chip.icon-slot-has-content .tag-content, .chip.selected .tag-content {
+  padding-inline-start: 0;
+}
+.chip.icon-slot-has-content .icon-slot-container, .chip.selected .icon-slot-container {
+  padding-inline: calc(var(--chip-container-padding) / 2);
 }
 .chip {
   /**
@@ -2308,66 +2349,56 @@ var css_248z$H = i`* {
 .chip .background {
   display: block;
   position: absolute;
+  left: 0;
   width: 100%;
   height: 100%;
-  border-radius: inherit;
-  background: var(--chip-container-color);
+  border-radius: var(--chip-container-shape);
+  background: var(--_chip-container-color);
   pointer-events: none;
 }
 .chip .outline {
+  z-index: 0;
   display: block;
   position: absolute;
+  left: 0;
   width: 100%;
   height: 100%;
-  border-radius: inherit;
+  border-radius: var(--chip-container-shape);
   border: 1px solid var(--chip-outline-color);
 }
 .chip .elevation {
   --elevation-level: 0;
   transition-duration: 280ms;
-  border-radius: inherit;
-}
-.chip.dismissible .tag-content {
-  padding-inline-end: 0.25rem;
+  --elevation-container-shape: var(--chip-container-shape);
 }
-.chip.selected {
-  color: var(--background);
-  background: var(--chip-hover-color);
-}
-.chip.selected .close-btn-icon {
-  color: var(--background);
-}`;
 
-var css_248z$G = i`:host([color=red]) {
-  --chip-container-color: var(--color-red-container);
-  --chip-outline-color: var(--color-on-red-container);
+/** Color state management */
+.chip {
+  --_chip-container-color: var(--chip-container-color);
+  --_chip-text-color: var(--chip-label-text-color);
+  --_chip-state-color: var(--_chip-text-color);
 }
-
-:host([color=green]) {
-  --chip-container-color: var(--color-green-container);
-  --chip-label-text-color: var(--color-on-green-container);
-  --chip-outline-color: var(--color-on-green-container);
+.chip:hover {
+  --_chip-state-opacity: 0.08;
 }
-
-:host([color=blue]) {
-  --chip-container-color: var(--color-blue-container);
-  --chip-label-text-color: var(--color-on-blue-container);
-  --chip-outline-color: var(--color-on-blue-container);
+.chip.pressed {
+  --_chip-state-opacity: 0.12;
 }
-
-:host([color=yellow]) {
-  --chip-container-color: var(--color-yellow-container);
-  --chip-label-text-color: var(--color-on-yellow-container);
-  --chip-outline-color: var(--color-on-yellow-container);
+.chip.selected {
+  --_chip-container-color: var(--color-secondary-container);
+  --_chip-text-color: var(--color-on-secondary-container);
 }
-
-:host([color=purple]) {
-  --chip-container-color: var(--color-purple-container);
-  --chip-label-text-color: var(--color-on-purple-container);
-  --chip-outline-color: var(--color-on-purple-container);
+.chip.disabled {
+  --_chip-container-color: var(--color-on-surface);
+  --_chip-container-opacity: 0.1;
+  --_chip-text-color: var(--color-on-surface);
+  --_chip-text-opacity: 0.38;
+}
+.chip.disabled .ripple {
+  display: none;
 }`;
 
-var css_248z$F = i`.tag {
+var css_248z$G = i`.tag {
   font-family: var(--font-family-sans) !important;
 }
 
@@ -2437,17 +2468,25 @@ var css_248z$F = i`.tag {
  * <wc-chip>Chip content</wc-chip>
  * ```
  */
-class Chip extends i$1 {
+class Chip extends BaseButton {
     constructor() {
         super(...arguments);
         /** If true, the tag will have a close icon. */
         this.dismissible = false;
-        /** Tag color. */
-        this.color = 'default';
-        /** Tag value. */
-        this.value = '';
-        /** If true, the tag will be selected. */
-        this.selected = false;
+        this._hasIconSlotContent = false;
+        this._isPressed = false;
+    }
+    focus() {
+        this.buttonElement?.focus();
+    }
+    blur() {
+        this.buttonElement?.blur();
+    }
+    firstUpdated() {
+        observerSlotChangesWithCallback(this.renderRoot.querySelector('slot[name="icon"]'), hasContent => {
+            this._hasIconSlotContent = hasContent;
+            this.requestUpdate();
+        });
     }
     _dismissClickHandler(e) {
         e.stopPropagation();
@@ -2461,7 +2500,7 @@ class Chip extends i$1 {
     }
     _renderCloseButton() {
         if (!this.dismissible)
-            return null;
+            return A;
         return b `
       <button
         class="close-btn"
@@ -2472,55 +2511,133 @@ class Chip extends i$1 {
       </button>
     `;
     }
-    _renderImage() {
-        if (this.imageSrc)
-            return b `<img
-        src=${this.imageSrc}
-        class="tag-image"
-        alt="Tag Logo"
-      />`;
-        return A;
-    }
     render() {
-        const classes = {
+        const cssClasses = {
             chip: true,
+            button: true,
             selected: this.selected,
             dismissible: this.dismissible,
-            [`color-${this.color}`]: true,
+            pressed: this._isPressed,
+            'icon-slot-has-content': this._hasIconSlotContent,
         };
+        if (!this.__isLink()) {
+            return b `<button
+            class=${e$1(cssClasses)}
+            id="button"
+            type=${this.htmlType}
+            @click=${this.__dispatchClickWithThrottle}
+            @mousedown=${this.__handlePress}
+            @keydown=${this.__handlePress}
+            @keyup=${this.__handlePress}
+  
+            aria-describedby=${o$1(this.softDisabled ? BaseButton.DISABLED_REASON_ID : undefined)}
+            ?aria-disabled=${this.softDisabled}
+  
+            ?disabled=${this.disabled}
+            ${spread(this.configAria)}
+          >
+            ${this.renderChipContent()}
+          </button>`;
+        }
+        return b `<a
+          class=${e$1(cssClasses)}
+          id="button"
+          href=${this.href}
+          target=${this.target}
+          tabindex=${this.disabled ? '-1' : '0'}
+          
+          @click=${this.__dispatchClick}
+          @mousedown=${this.__handlePress}
+          @keydown=${this.__handlePress}
+          @keyup=${this.__handlePress}
+          role="button"
+  
+          aria-describedby=${o$1(this.softDisabled ? BaseButton.DISABLED_REASON_ID : undefined)}
+          ?aria-disabled=${this.softDisabled}
+  
+          ${spread(this.configAria)}
+        >
+          ${this.renderChipContent()}
+        </a>`;
+    }
+    renderChipContent() {
         return b `
-      <div class="${e$1(classes)}">
-        <wc-elevation class="elevation"></wc-elevation>
-        <div class="background"></div>
-        <div class="outline"></div>
+      <wc-focus-ring class="focus-ring" for="button"></wc-focus-ring>
+      <wc-elevation class="elevation"></wc-elevation>
+      <div class="background"></div>
+      <div class="outline"></div>
+      <wc-ripple class="ripple"></wc-ripple>
+      <div class="tag-content">
 
-        <div class="tag-content">
-          <slot name="icon"></slot>
-          <slot></slot>
-          ${this._renderCloseButton()}
+        <div class="icon-slot-container">
+          ${this.selected
+            ? b `<wc-icon class="selected-icon" name="check"></wc-icon>`
+            : b `<slot name="icon"></slot>`}
         </div>
+        <div class="label-container">
+          <slot></slot>
+        </div> 
+        
+        ${this._renderCloseButton()}
       </div>
     `;
     }
 }
 // Define styles (Lit handles Scoping via Shadow DOM by default)
 // You would typically import your tag.scss.js here or use the css tag
-Chip.styles = [css_248z$H, css_248z$G, css_248z$F];
+Chip.styles = [css_248z$H, css_248z$G];
 __decorate([
     n({ type: Boolean })
 ], Chip.prototype, "dismissible", void 0);
 __decorate([
-    n({ type: String, reflect: true })
-], Chip.prototype, "color", void 0);
-__decorate([
-    n({ type: String, reflect: true })
-], Chip.prototype, "value", void 0);
+    n({ reflect: true })
+], Chip.prototype, "configAria", void 0);
 __decorate([
-    n({ type: Boolean, reflect: true })
-], Chip.prototype, "selected", void 0);
+    r()
+], Chip.prototype, "_hasIconSlotContent", void 0);
 __decorate([
-    n({ type: String })
-], Chip.prototype, "imageSrc", void 0);
+    r()
+], Chip.prototype, "_isPressed", void 0);
+
+var css_248z$F = i`* {
+  box-sizing: border-box;
+}
+
+.screen-reader-only {
+  display: none !important;
+}
+
+:host {
+  display: block;
+}
+
+slot {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}`;
+
+/**
+ * @label Chip Set
+ * @tag wc-chip-set
+ * @rawTag chip-set
+ * @summary A layout container for wrapping chips.
+ * @tags layout
+ *
+ * @example
+ * ```html
+ * <wc-chip-set>
+ *   <wc-chip>One</wc-chip>
+ *   <wc-chip>Two</wc-chip>
+ * </wc-chip-set>
+ * ```
+ */
+class ChipSet extends i$1 {
+    render() {
+        return b `<slot></slot>`;
+    }
+}
+ChipSet.styles = [css_248z$F];
 
 var css_248z$E = i`:host {
   display: block;
@@ -2712,7 +2829,7 @@ class LinearProgress extends BaseProgress {
             <div class="track track-start"></div>
             <div
               class="active-indicator"
-              style="${o$1({
+              style="${o$2({
             width: `${this.__getPercentageValue()}%`,
         })}"
             ></div>
@@ -2872,7 +2989,7 @@ class CircularProgress extends BaseProgress {
               cx="8"
               cy="8"
               r="6"
-              style="${o$1({
+              style="${o$2({
             strokeDasharray: `${circumference}`,
             strokeDashoffset: this.indeterminate ? undefined : `${offset}`,
         })}"
@@ -3610,7 +3727,7 @@ var css_248z$z = i`* {
   display: flex;
   align-items: center;
   flex: 1;
-  height: var(--field-height, 3.5rem);
+  min-height: var(--field-height, 3.5rem);
   padding-block: var(--field-padding-block);
   z-index: 1;
 }
@@ -6553,8 +6670,8 @@ class BreadcrumbItem extends i$1 {
               <a
                 class="breadcrumb-link"
                 itemprop="item"
-                href=${o$2(this.href)}
-                target=${o$2(this.target)}
+                href=${o$1(this.href)}
+                target=${o$1(this.target)}
                 ${this.target === '_blank'
                 ? b `rel="noopener noreferrer"`
                 : A}
@@ -6616,7 +6733,6 @@ class Breadcrumb extends i$1 {
         super(...arguments);
         /**
          * Accessible label for the breadcrumb navigation landmark.
-         * @default "Breadcrumb"
          */
         this.label = 'Breadcrumb';
     }
@@ -7105,6 +7221,7 @@ class Menu extends i$1 {
                 return;
             }
             this._setActiveItem(item);
+            this._dispatchItemActivate(item);
             if (item.keepOpen) {
                 return;
             }
@@ -7323,6 +7440,13 @@ class Menu extends i$1 {
         this.activeIndex = nextIndex;
         this._syncRovingTabIndex();
     }
+    _dispatchItemActivate(item) {
+        this.dispatchEvent(new CustomEvent('menu-item-activate', {
+            bubbles: true,
+            composed: true,
+            detail: { item },
+        }));
+    }
     _applyPositioning() {
         if (!this.open || !this.menuListElement) {
             return;
@@ -7903,8 +8027,8 @@ class ListItem extends BaseButtonMixin(BaseHyperlinkMixin(i$1)) {
         class=${e$1(cssClasses)}
         href=${this.href}
         target=${this.target}
-        rel=${o$2(this.rel)}
-        download=${o$2(this.download)}
+        rel=${o$1(this.rel)}
+        download=${o$1(this.download)}
         tabindex=${this.disabled ? '-1' : '0'}
         aria-disabled=${String(this.disabled || this.softDisabled)}
         @click=${this.__dispatchClick}
@@ -9797,7 +9921,7 @@ class Slider extends i$1 {
           @touchstart=${this.onMouseDown}
         >
           <div class="track">
-            <div class="track-active" style=${o$1({ width: `${percentage}%` })}></div>
+            <div class="track-active" style=${o$2({ width: `${percentage}%` })}></div>
           </div>
 
           <div 
@@ -9809,7 +9933,7 @@ class Slider extends i$1 {
             aria-valuemax=${this.max}
             aria-valuenow=${this.value}
             aria-disabled=${this.disabled}
-            style=${o$1({ left: `calc(${percentage}% - var(--thumb-half))` })}
+            style=${o$2({ left: `calc(${percentage}% - var(--thumb-half))` })}
             @keydown=${this.handleKeyDown}
           >
             ${this.labeled ? b `<div class="value-label">${this.value}</div>` : ''}
@@ -11153,7 +11277,7 @@ class SidebarSubMenu extends i$1 {
             disabled: this.disabled,
             selected: this.selected,
         });
-        const inlineStyles = o$1({
+        const inlineStyles = o$2({
             paddingLeft: `calc(var(--sidebar-menu-item-height, 2.5rem) * ${this.level})`,
         });
         return b `
@@ -13475,5 +13599,5 @@ __decorate([
     n({ type: Boolean, attribute: 'show-divider' })
 ], NavigationRail.prototype, "showDivider", void 0);
 
-export { Accordion as A, Badge as B, Checkbox as C, DatePicker as D, Elevation as E, Field as F, Spinner as G, SubMenu as H, Image as I, Svg as J, Switch as K, LinearProgress as L, Menu as M, NavigationRail as N, TabGroup as O, Pagination as P, TabPanel as Q, Radio as R, SegmentedButton as S, Tab as T, Table as U, Tabs as V, Tag as W, Textarea as X, TimePicker as Y, Tooltip as Z, UrlField as _, Avatar as a, Breadcrumb as b, BreadcrumbItem as c, Chip as d, CircularProgress as e, Container as f, Divider as g, EmptyState as h, FocusRing as i, Input as j, Link as k, List as l, ListItem as m, MenuItem as n, NavigationRailItem as o, NumberField as p, Ripple as q, SegmentedButtonGroup as r, Select as s, SelectOptionElement as t, SidebarMenu as u, SidebarMenuItem as v, SidebarSubMenu as w, Skeleton as x, Slider as y, Snackbar as z };
-//# sourceMappingURL=navigation-rail-DTTkqohi.js.map
+export { UrlField as $, Accordion as A, Badge as B, Checkbox as C, DatePicker as D, Elevation as E, Field as F, Snackbar as G, Spinner as H, Image as I, SubMenu as J, Svg as K, LinearProgress as L, Menu as M, NavigationRail as N, Switch as O, Pagination as P, TabGroup as Q, Radio as R, SegmentedButton as S, Tab as T, TabPanel as U, Table as V, Tabs as W, Tag as X, Textarea as Y, TimePicker as Z, Tooltip as _, Avatar as a, Breadcrumb as b, BreadcrumbItem as c, Chip as d, ChipSet as e, CircularProgress as f, Container as g, Divider as h, EmptyState as i, FocusRing as j, Input as k, Link as l, List as m, ListItem as n, MenuItem as o, NavigationRailItem as p, NumberField as q, Ripple as r, SegmentedButtonGroup as s, Select as t, SelectOptionElement as u, SidebarMenu as v, SidebarMenuItem as w, SidebarSubMenu as x, Skeleton as y, Slider as z };
+//# sourceMappingURL=navigation-rail-CD7IrqbN.js.map