@redvars/peacock 3.8.1 → 3.8.3

package/src/{peacock-loader.ts → loader.ts}

@@ -1,90 +1,100 @@
+import { LoaderConfig, LoaderUtils } from './LoaderUtils.js';
+import { loadCSS } from './CssLoader.js';
+
 // Eager loaded
+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/button.js';
+import ButtonGroup from '@/button/button-group/button-group.js';
+import { IconButton } from '@/button/icon-button/icon-button.js';
+import { Fab } from '@/button/fab/fab.js';
+import { SegmentedButton } from '@/segmented-button/segmented-button.js';
+import { SegmentedButtonGroup } from '@/segmented-button/segmented-button-group.js';
+import { SplitButton } from '@/split-button/split-button.js';
+import { DropdownButton } from '@/dropdown-button/dropdown-button.js';
+import { Input } from '@/input/input.js';
+import { UrlField } from '@/url-field/url-field.js';
+import { Field } from '@/field/field.js';
+import { NumberField } from '@/number-field/number-field.js';
+import { DatePicker } from '@/date-picker/date-picker.js';
+import { TimePicker } from '@/time-picker/time-picker.js';
+import { Textarea } from '@/textarea/textarea.js';
+import { Switch } from '@/switch/switch.js';
+import { Checkbox } from '@/checkbox/checkbox.js';
+import { Radio } from '@/radio/radio.js';
 
-import { Elevation } from './elevation/elevation.js';
-import { FocusRing } from './focus-ring/focus-ring.js';
-import { Ripple } from './ripple/ripple.js';
+import { Menu } from '@/menu/menu/menu.js';
+import { MenuItem } from '@/menu/menu-item/menu-item.js';
+import { SubMenu } from '@/menu/sub-menu/sub-menu.js';
+import { Item } from '@/item/item.js';
+import { List } from '@/list/list.js';
+import { ListItem } from '@/list/list-item.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/button.js';
-import ButtonGroup from './button/button-group/button-group.js';
-import { IconButton } from './button/icon-button/icon-button.js';
-import { Fab } from './fab/fab.js';
-import { SegmentedButton } from './segmented-button/segmented-button.js';
-import { SegmentedButtonGroup } from './segmented-button/segmented-button-group.js';
-import { SplitButton } from './split-button/split-button.js';
-import { DropdownButton } from './dropdown-button/dropdown-button.js';
-import { Input } from './input/input.js';
-import { UrlField } from './url-field/url-field.js';
-import { Field } from './field/field.js';
-import { NumberField } from './number-field/number-field.js';
-import { DatePicker } from './date-picker/date-picker.js';
-import { TimePicker } from './time-picker/time-picker.js';
-import { Textarea } from './textarea/textarea.js';
-import { Switch } from './switch/switch.js';
-import { Checkbox } from './checkbox/checkbox.js';
-import { Radio } from './radio/radio.js';
+import { Accordion } from '@/accordion/accordion.js';
+import { Link } from '@/link/link.js';
+import { Tag } from '@/chip/tag/tag.js';
+import { Chip } from '@/chip/chip/chip.js';
+import { ChipSet } from '@/chip/chip-set/chip-set.js';
+import { LinearProgress } from '@/progress/linear-progress/linear-progress.js';
+import { CircularProgress } from '@/progress/circular-progress/circular-progress.js';
 
-import { Menu } from './menu/menu/menu.js';
-import { MenuItem } from './menu/menu-item/menu-item.js';
-import { SubMenu } from './menu/sub-menu/sub-menu.js';
-import { Item } from './item/item.js';
-import { List } from './list/list.js';
-import { ListItem } from './list/list-item.js';
+import { Tooltip } from '@/tooltip/tooltip.js';
+import { Popover } from '@/popover/popover.js';
+import { PopoverContent } from '@/popover/popover-content.js';
+import { Breadcrumb, BreadcrumbItem } from '@/breadcrumb/index.js';
 
-import { Accordion } from './accordion/accordion.js';
-import { Link } from './link/link.js';
-import { Tag } from './chip/tag/tag.js';
-import { Chip } from './chip/chip/chip.js';
-import { ChipSet } from './chip/chip-set/chip-set.js';
-import { LinearProgress } from './progress/linear-progress/linear-progress.js';
-import { CircularProgress } from './progress/circular-progress/circular-progress.js';
+import { Skeleton } from '@/skeleton/skeleton.js';
+import { Spinner } from '@/spinner/spinner.js';
 
-import { Tooltip } from './tooltip/tooltip.js';
-import { Popover } from './popover/popover.js';
-import { PopoverContent } from './popover/popover-content.js';
-import { Breadcrumb, BreadcrumbItem } from './breadcrumb/index.js';
+import { EmptyState } from '@/empty-state/empty-state.js';
+import { Container } from '@/container/container.js';
+import { Image } from '@/image/image.js';
+import { Svg } from '@/svg/svg.js';
 
-import { Skeleton } from './skeleton/skeleton.js';
-import { Spinner } from './spinner/spinner.js';
+import { TabGroup } from '@/tabs/tab-group.js';
+import { Tabs } from '@/tabs/tabs.js';
+import { Tab } from '@/tabs/tab.js';
+import { TabPanel } from '@/tabs/tab-panel.js';
+import { Slider } from '@/slider/slider.js';
+import { ColorPicker } from '@/color-picker/color-picker.js';
+import { Table } from '@/table/table.js';
+import { Pagination } from '@/pagination/pagination.js';
+import { SidebarMenu } from '@/sidebar-menu/sidebar-menu.js';
+import { SidebarMenuItem } from '@/sidebar-menu/sidebar-menu-item.js';
+import { SidebarSubMenu } from '@/sidebar-menu/sidebar-sub-menu.js';
+import { Card } from '@/card/card.js';
+import { CardContent } from '@/card/card-content.js';
+import { Alert } from '@/alert/alert.js';
+import { Notification } from '@/notification/notification.js';
+import { NotificationManager } from '@/notification-manager/notification-manager.js';
+import { Snackbar } from '@/snackbar/snackbar.js';
+import { BottomSheet } from '@/bottom-sheet/bottom-sheet.js';
+import { SideSheet } from '@/side-sheet/side-sheet.js';
+import { Modal } from '@/modal/modal.js';
+import { Select } from '@/select/select.js';
+import { SelectOptionElement } from '@/select/option.js';
+import { Search } from '@/search/search.js';
+import { Toolbar } from '@/toolbar/toolbar.js';
+import { AppBar } from '@/app-bar/app-bar.js';
+import { NavigationRail } from '@/navigation-rail/navigation-rail.js';
+import { NavigationRailItem } from '@/navigation-rail/navigation-rail-item.js';
 
-import { EmptyState } from './empty-state/empty-state.js';
-import { Container } from './container/container.js';
-import { Image } from './image/image.js';
-import { Svg } from './svg/svg.js';
+const distDirectory = `${import.meta.url}/..`;
 
-import { LoaderConfig, LoaderUtils } from './LoaderUtils.js';
-import { loadCSS } from './CssLoader.js';
-import { TabGroup } from './tabs/tab-group.js';
-import { Tabs } from './tabs/tabs.js';
-import { Tab } from './tabs/tab.js';
-import { TabPanel } from './tabs/tab-panel.js';
-import { Slider } from './slider/slider.js';
-import { Table } from './table/table.js';
-import { Pagination } from './pagination/pagination.js';
-import { SidebarMenu } from './sidebar-menu/sidebar-menu.js';
-import { SidebarMenuItem } from './sidebar-menu/sidebar-menu-item.js';
-import { SidebarSubMenu } from './sidebar-menu/sidebar-sub-menu.js';
-import { Card } from './card/card.js';
-import { CardContent } from './card/card-content.js';
-import { Banner } from './banner/banner.js';
-import { Notification } from './notification/notification.js';
-import { NotificationManager } from './notification-manager/notification-manager.js';
-import { Snackbar } from './snackbar/snackbar.js';
-import { BottomSheet } from './bottom-sheet/bottom-sheet.js';
-import { SideSheet } from './side-sheet/side-sheet.js';
-import { Modal } from './modal/modal.js';
-import { Select } from './select/select.js';
-import { SelectOptionElement } from './select/option.js';
-import { Search } from './search/search.js';
-import { Toolbar } from './toolbar/toolbar.js';
-import { NavigationRail } from './navigation-rail/navigation-rail.js';
-import { NavigationRailItem } from './navigation-rail/navigation-rail-item.js';
+const url = new URL(import.meta.url);
+const params = url.searchParams;
 
-const distDirectory = `${import.meta.url}/..`;
-await loadCSS(`${distDirectory}/assets/styles.css`);
+// Example: accessing app.js?theme=dark&user=123
+const includeStyles = params.has('styles');
+
+if (includeStyles) {
+  await loadCSS(`${distDirectory}/assets/styles.css`);
+}
 
 /*
 import tooltipStyles from './popover/tooltip.css-component.scss';
@@ -190,8 +200,8 @@ const loaderConfig: LoaderConfig = {
     'wc-card-content': {
       CustomElementClass: CardContent,
     },
-    'wc-banner': {
-      CustomElementClass: Banner,
+    'wc-alert': {
+      CustomElementClass: Alert,
     },
     'wc-notification': {
       CustomElementClass: Notification,
@@ -306,6 +316,9 @@ const loaderConfig: LoaderConfig = {
     'wc-slider': {
       CustomElementClass: Slider,
     },
+    'wc-color-picker': {
+      CustomElementClass: ColorPicker,
+    },
     'wc-table': {
       CustomElementClass: Table,
     },
@@ -345,6 +358,9 @@ const loaderConfig: LoaderConfig = {
     'wc-toolbar': {
       CustomElementClass: Toolbar,
     },
+    'wc-app-bar': {
+      CustomElementClass: AppBar,
+    },
     'wc-navigation-rail': {
       CustomElementClass: NavigationRail,
     },

package/src/menu/menu/menu.scss

@@ -1,4 +1,4 @@
-@use "../../../scss/mixin";
+@use '../../../scss/mixin';
 
 @include mixin.base-styles;
 
@@ -9,7 +9,6 @@
   width: var(--menu-width, max-content);
   max-width: 100vw;
   min-width: 112px;
-  padding-block: var(--spacing-050);
   transform-origin: top center;
 
   --_menu-enter-duration: var(--duration-medium1);
@@ -18,9 +17,11 @@
   --_menu-exit-easing: cubic-bezier(0.3, 0, 0.8, 0.15);
 
   transition-property: opacity, transform, visibility;
-  transition-duration: var(--_menu-exit-duration), var(--_menu-exit-duration), 0ms;
+  transition-duration:
+    var(--_menu-exit-duration), var(--_menu-exit-duration), 0ms;
   transition-delay: 0ms, 0ms, var(--_menu-exit-duration);
-  transition-timing-function: var(--_menu-exit-easing), var(--_menu-exit-easing), linear;
+  transition-timing-function:
+    var(--_menu-exit-easing), var(--_menu-exit-easing), linear;
 
   &.closed {
     opacity: 0;
@@ -34,9 +35,11 @@
     visibility: visible;
     pointer-events: auto;
     transform: translateY(0) scale(1);
-    transition-duration: var(--_menu-enter-duration), var(--_menu-enter-duration), 0ms;
+    transition-duration:
+      var(--_menu-enter-duration), var(--_menu-enter-duration), 0ms;
     transition-delay: 0ms, 0ms, 0ms;
-    transition-timing-function: var(--_menu-enter-easing), var(--_menu-enter-easing), linear;
+    transition-timing-function:
+      var(--_menu-enter-easing), var(--_menu-enter-easing), linear;
   }
 
   &.preview {
@@ -47,7 +50,6 @@
   .menu-content {
     display: flex;
     flex-direction: column;
-    gap: var(--spacing-050);
     z-index: 1;
     width: 100%;
 
@@ -69,12 +71,9 @@
   .background {
     display: block;
     position: absolute;
-    left: 0;
-    top: 0;
-    width: 100%;
-    height: 100%;
-    background-color: var(--_container-color);
-    opacity: var(--_container-opacity, 1);
+    inset: 0;
+
+    border: 1px solid var(--color-red);
 
     border-start-start-radius: var(--_container-shape-start-start);
     border-start-end-radius: var(--_container-shape-start-end);
@@ -82,16 +81,6 @@
     border-end-end-radius: var(--_container-shape-end-end);
     pointer-events: none;
   }
-
-  .elevation {
-    --elevation-level: 2;
-    transition-duration: 280ms;
-    --elevation-container-shape-start-start: var(--_container-shape-start-start);
-    --elevation-container-shape-start-end: var(--_container-shape-start-end);
-    --elevation-container-shape-end-start: var(--_container-shape-end-start);
-    --elevation-container-shape-end-end: var(--_container-shape-end-end);
-    --elevation-container-shape-variant: var(--_container-corner-shape-variant);
-  }
 }
 
 @media (prefers-reduced-motion: reduce) {
@@ -101,17 +90,17 @@
   }
 }
 
-.menu { 
+.menu {
   --_container-shape-start-start: var(--shape-corner-large);
   --_container-shape-start-end: var(--shape-corner-large);
   --_container-shape-end-start: var(--shape-corner-large);
   --_container-shape-end-end: var(--shape-corner-large);
 
   &.variant-standard {
-    --_container-color: var(--color-surface-container);
+    --menu-item-container-color: var(--color-surface-container);
   }
 
   &.variant-vibrant {
-    --_container-color: var(--color-tertiary-container);
+    --menu-item-container-color: var(--color-tertiary-container);
   }
 }

package/src/menu/menu/menu.ts

@@ -3,8 +3,9 @@ import { property, query, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import type { Placement } from '@floating-ui/dom';
 import styles from './menu.scss';
-import { FloatingController } from '../../__controllers/floating-controller.js';
+import { FloatingController } from '../../__internal/controllers/floating-controller.js';
 import { MenuItem } from '../menu-item/menu-item.js';
+import IndividualComponent from '@/IndividualComponent.js';
 
 type CloseReason =
   | { kind: 'click-selection' }
@@ -28,43 +29,56 @@ type CloseReason =
  * </wc-menu>
  * ```
  */
+@IndividualComponent
 export class Menu extends LitElement {
   static styles = [styles];
 
   static Item = MenuItem;
 
+  /** Whether the menu is currently visible. */
   @property({ type: Boolean, reflect: true }) open = false;
 
+  /** Visual variant of the menu. `"vibrant"` applies stronger color emphasis. */
   @property({ type: String, reflect: true }) variant: 'standard' | 'vibrant' =
     'standard';
 
+  /** ID of the anchor element the menu is positioned relative to. */
   @property({ type: String }) anchor = '';
 
+  /** When true, renders the menu in a static preview state (always visible, no animation). */
   @property({ type: Boolean, reflect: true }) preview = false;
 
+  /** When true, the menu will not close when a click occurs outside it. */
   @property({ type: Boolean, attribute: 'stay-open-on-outside-click' })
   stayOpenOnOutsideClick = false;
 
+  /** When true, the menu will not close when focus leaves it. */
   @property({ type: Boolean, attribute: 'stay-open-on-focusout' })
   stayOpenOnFocusout = false;
 
+  /** Set to true when this menu is being used as a submenu inside another menu. */
   @property({ type: Boolean, attribute: 'is-submenu' }) isSubmenu = false;
 
+  /** Floating UI placement of the menu relative to its anchor. */
   @property({ type: String }) placement: Placement = 'bottom-start';
 
+  /** Distance in pixels between the menu and its anchor element. */
   @property({ type: Number }) offset = 6;
 
+  /** Index of the currently focused/active item within the enabled items list. */
   @state() private activeIndex = -1;
 
   @query('.menu') private readonly menuListElement!: HTMLElement;
 
+  /** Direct reference to the anchor element; takes precedence over the `anchor` ID property. */
   anchorElement: HTMLElement | null = null;
 
+  /** Controller managing floating-UI positioning. */
   private readonly _floatingController = new FloatingController(this, {
     trigger: 'manual',
     closeOnClickOutside: false,
     strategy: 'fixed',
-    onOpenChange: (isOpen) => {
+    onOpenChange: isOpen => {
       if (isOpen || !this.open) {
         return;
       }
@@ -73,8 +87,10 @@ export class Menu extends LitElement {
     },
   });
 
+  /** Element that had focus before the menu opened; restored on close. */
   private _lastFocusedElement: HTMLElement | null = null;
 
+  /** Reason that triggered the most recent close, included in the `closed` event detail. */
   private _closeReason: CloseReason = { kind: 'programmatic' };
 
   connectedCallback() {
@@ -234,9 +250,7 @@ export class Menu extends LitElement {
 
   private _isEventFromThisMenu(event: Event) {
     const path = event.composedPath();
-    const sourceMenu = path.find(
-      target => target instanceof Menu,
-    );
+    const sourceMenu = path.find(target => target instanceof Menu);
 
     return sourceMenu === this;
   }
@@ -358,8 +372,6 @@ export class Menu extends LitElement {
     }
   };
 
-
-
   private _onSlotChange = () => {
     this._syncRovingTabIndex();
   };
@@ -446,7 +458,7 @@ export class Menu extends LitElement {
   render() {
     return html`<div
       class=${classMap({
-        'menu': true,
+        menu: true,
         open: !this.preview && this.open,
         closed: !this.preview && !this.open,
         preview: this.preview,
@@ -455,7 +467,6 @@ export class Menu extends LitElement {
       aria-hidden=${String(!this.open)}
     >
       <div class="background"></div>
-      <wc-elevation class="elevation"></wc-elevation>
 
       <div class="menu-content">
         <slot @slotchange=${this._onSlotChange}></slot>

package/src/menu/menu-item/menu-item.scss

@@ -1,9 +1,10 @@
-@use "../../../scss/mixin";
+@use '../../../scss/mixin';
 
 @include mixin.base-styles;
 
 :host {
   outline: none;
+  position: relative;
 
   --menu-item-container-shape-start-start: var(--shape-corner-extra-small);
   --menu-item-container-shape-start-end: var(--shape-corner-extra-small);
@@ -11,27 +12,88 @@
   --menu-item-container-shape-end-end: var(--shape-corner-extra-small);
 }
 
+/*
+  * Reset native button/link styles
+  */
+.native-button {
+  @include mixin.reset-button-styles;
+}
+.native-link {
+  @include mixin.reset-link-styles;
+}
+
 .menu-item {
+  position: relative;
   width: 100%;
-  --item-height: 3rem;
-  --item-container-shape-start-start: var(--menu-item-container-shape-start-start);
-  --item-container-shape-start-end: var(--menu-item-container-shape-start-end);
-  --item-container-shape-end-start: var(--menu-item-container-shape-end-start);
-  --item-container-shape-end-end: var(--menu-item-container-shape-end-end);
-  --item-container-shape-variant: none;
-
-  --item-label-font-family: var(--typography-label-large-font-family);
-  --item-label-font-size: var(--typography-label-large-font-size);
-  --item-label-font-weight: var(--typography-label-large-font-weight);
-  --item-label-line-height: var(--typography-label-large-line-height);
-  --item-label-letter-spacing: var(--typography-label-large-letter-spacing);
-
-  --item-label-text-color: var(--menu-item-label-color);
-  --item-leading-trailing-color: var(--menu-item-label-color);
-  --item-supporting-text-color: var(--menu-item-label-color);
-  --item-container-selected-color: var(--menu-item-container-selected-color);
-  --item-label-text-selected-color: var(--menu-item-label-selected-color);
-  --item-icon-size: var(--button-icon-size, var(--_button-icon-size));
+  text-align: start;
+  padding-top: 2px;
+  padding-inline: var(--spacing-050);
+
+  .menu-item-background {
+    background-color: var(--menu-item-container-color);
+    position: absolute;
+    inset: 0px;
+  }
+
+  .menu-item-content {
+    --item-height: 1.5rem;
+    --item-multiline-height: 3rem;
+    --item-padding-inline: 10px;
+    --item-container-shape-start-start: var(
+      --menu-item-container-shape-start-start
+    );
+    --item-container-shape-start-end: var(
+      --menu-item-container-shape-start-end
+    );
+    --item-container-shape-end-start: var(
+      --menu-item-container-shape-end-start
+    );
+    --item-container-shape-end-end: var(--menu-item-container-shape-end-end);
+    --item-container-shape-variant: none;
+
+    --item-label-font-family: var(--typography-label-large-font-family);
+    --item-label-font-size: var(--typography-label-large-font-size);
+    --item-label-font-weight: var(--typography-label-large-font-weight);
+    --item-label-line-height: var(--typography-label-large-line-height);
+    --item-label-letter-spacing: var(--typography-label-large-letter-spacing);
+
+    --item-label-text-color: var(--menu-item-label-color);
+    --item-leading-trailing-color: var(--menu-item-label-color);
+    --item-supporting-text-color: var(--menu-item-label-color);
+    --item-container-selected-color: var(--menu-item-container-selected-color);
+    --item-label-text-selected-color: var(--menu-item-label-selected-color);
+    --item-icon-size: var(--button-icon-size, var(--_button-icon-size));
+
+    .background {
+      background-color: var(--menu-item-container-color);
+      opacity: var(--_container-opacity, 1);
+      border-radius: var(--shape-corner-medium);
+    }
+
+    .focus-ring {
+      --focus-ring-container-shape-start-start: var(--shape-corner-medium);
+      --focus-ring-container-shape-start-end: var(--shape-corner-medium);
+      --focus-ring-container-shape-end-start: var(--shape-corner-medium);
+      --focus-ring-container-shape-end-end: var(--shape-corner-medium);
+      z-index: 2;
+      --focus-ring-inset: 0px;
+    }
+
+    .ripple {
+      --ripple-state-opacity: var(--_container-state-opacity, 0);
+      --ripple-pressed-color: var(--_container-state-color);
+      border-radius: var(--shape-corner-medium);
+    }
+
+    .skeleton {
+      z-index: 2;
+
+      --skeleton-container-shape-start-start: var(--shape-corner-medium);
+      --skeleton-container-shape-start-end: var(--shape-corner-medium);
+      --skeleton-container-shape-end-start: var(--shape-corner-medium);
+      --skeleton-container-shape-end-end: var(--shape-corner-medium);
+    }
+  }
 }
 
 :host([selected]) {