@redvars/peacock 3.8.2 → 3.8.4

package/src/navigation-rail/navigation-rail.scss

@@ -5,19 +5,25 @@
 :host {
   display: block;
   height: 100%;
-  width: var(--nav-rail-width, 5rem); /* 80dp */
-  overflow: hidden;
+  width: var(--nav-rail-width, 6rem); /* 96dp */
+  overflow-y: auto;
+  overflow-x: hidden;
+  --nav-rail-padding-block: 1.5rem;
+
+  --nav-rail-container-color: var(--container-surface);
+  --nav-rail-label-text-color: var(--color-on-surface);
 }
 
 .rail {
   display: flex;
   flex-direction: column;
   align-items: center;
-  height: 100%;
+  height: calc(100% - var(--nav-rail-padding-block) * 2);
   width: 100%;
   border-radius: inherit;
-  background-color: var(--nav-rail-container-color, var(--color-surface));
-  padding-block: var(--nav-rail-padding-block, 0.75rem); /* 12dp */
+  background-color: var(--nav-rail-container-color);
+  color: var(--nav-rail-label-text-color);
+  margin-block: var(--nav-rail-padding-block); /* 24dp */
   box-sizing: border-box;
 
   .header {
@@ -33,21 +39,6 @@
     }
   }
 
-  .footer {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: flex-end;
-    width: 100%;
-    flex-shrink: 0;
-    margin-top: auto;
-    background-color: var(--nav-rail-container-color);
-
-    &:empty {
-      display: none;
-    }
-  }
-
   wc-divider {
     width: calc(100% - 1rem);
     flex-shrink: 0;
@@ -59,11 +50,23 @@
     align-items: center;
     width: 100%;
     gap: 0.75rem; /* 12dp between items */
-    flex: 1 1 auto;
-    min-height: 0;
+    flex: 1;
 
     ::slotted(wc-navigation-rail-item) {
       width: 100%;
     }
   }
+
+  .footer {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 100%;
+    margin-top: auto;
+    background-color: var(--nav-rail-container-color);
+
+    &:empty {
+      display: none;
+    }
+  }
 }

package/src/side-sheet/side-sheet.ts

@@ -91,7 +91,7 @@ export class SideSheet extends LitElement {
         aria-modal=${this.variant === 'modal' ? 'true' : 'false'}
         aria-hidden=${!this.open ? 'true' : 'false'}
       >
-        <div class="content">
+        <div class="content" ?inert=${!this.open}>
           <slot></slot>
         </div>
       </div>

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

@@ -14,7 +14,7 @@
   --sidebar-menu-item-label-color: var(--color-on-surface);
   --sidebar-menu-item-icon-color: var(--color-on-surface-variant);
   --sidebar-menu-item-selected-background: var(--color-secondary-container);
-  --sidebar-menu-item-selected-color: var(--color-on-secondary-container);
+  --sidebar-menu-item-selected-label-color: var(--color-on-secondary-container);
   --sidebar-menu-item-focus-ring-color: var(--color-primary);
 
   // M3 animation timing
@@ -42,7 +42,8 @@
 
   &.selected {
     --_container-color: var(--sidebar-menu-item-selected-background);
-    --_label-color: var(--sidebar-menu-item-selected-color);
+    --_label-color: var(--sidebar-menu-item-selected-label-color);
+    font-weight: var(--font-weight-bold) !important;
   }
 
   &.disabled {
@@ -61,9 +62,10 @@
   gap: 0.25rem;
   flex: 1;
   min-height: var(--sidebar-menu-item-height);
-  padding-inline: 0.75rem;
+  padding-inline: var(--sidebar-menu-item-content-padding, 0.75rem);
   color: inherit;
   z-index: 1;
+  overflow: hidden;
 }
 
 .background {
@@ -78,9 +80,15 @@
 .focus-ring {
   z-index: 2;
   --focus-ring-color: var(--sidebar-menu-item-focus-ring-color);
-  --focus-ring-container-shape-start-start: var(--sidebar-menu-item-border-radius);
-  --focus-ring-container-shape-start-end: var(--sidebar-menu-item-border-radius);
-  --focus-ring-container-shape-end-start: var(--sidebar-menu-item-border-radius);
+  --focus-ring-container-shape-start-start: var(
+    --sidebar-menu-item-border-radius
+  );
+  --focus-ring-container-shape-start-end: var(
+    --sidebar-menu-item-border-radius
+  );
+  --focus-ring-container-shape-end-start: var(
+    --sidebar-menu-item-border-radius
+  );
   --focus-ring-container-shape-end-end: var(--sidebar-menu-item-border-radius);
 }
 
@@ -99,4 +107,3 @@
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-

package/dist/list-D6JLh1uh.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"list-D6JLh1uh.js","sources":["../../src/list/list-item.ts","../../src/list/list.ts"],"sourcesContent":["import { html, LitElement, nothing } from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport styles from './list-item.scss';\nimport { isLink } from '@/__internal/utils/is-link.js';\nimport {\n  dispatchActivationClick,\n  isActivationClick,\n} from '@/__internal/utils/dispatch-event-utils.js';\nimport { ARIAMixinStrict } from '@/__internal/aria/aria.js';\nimport { mixinBaseButton } from '@/button/base-button/base-button.js';\nimport { mixinHyperlink } from '@/__internal/mixins/hyperlink.js';\nimport { mixinDelegatesAria } from '@/__internal/aria/delegate.js';\nimport { mixinElementInternals } from '@/__internal/mixins/element-internals.js';\n\n/**\n * @label List Item\n * @tag wc-list-item\n * @rawTag list-item\n *\n * @summary A list item with leading, trailing and content slots.\n *\n * @example\n * ```html\n * <wc-list-item selected>\n *   <wc-icon slot=\"leading\" name=\"person\"></wc-icon>\n *   Profile\n *   <wc-icon slot=\"trailing\" name=\"chevron_right\"></wc-icon>\n * </wc-list-item>\n * ```\n * @tags display\n */\nexport class ListItem extends mixinBaseButton(\n  mixinHyperlink(mixinDelegatesAria(mixinElementInternals(LitElement))),\n) {\n  // ── Static ───────────────────────────────────────────────────────────────\n\n  /** @nocollapse */ // eslint-disable-next-line\n  static override shadowRootOptions: ShadowRootInit = {\n    mode: 'open',\n    delegatesFocus: true,\n  };\n\n  static styles = [styles];\n\n  @property({ type: Boolean, reflect: true }) selected = false;\n\n  /** When true, renders the list-item in a loading skeleton state. */\n  @property({ type: Boolean, reflect: true }) skeleton: boolean = false;\n\n  @query('#list-item') readonly itemElement!: HTMLElement | null;\n\n  constructor() {\n    super();\n    this.addEventListener('click', this.__dispatchClickWithThrottle);\n  }\n\n  connectedCallback() {\n    // eslint-disable-next-line wc/guard-super-call\n    super.connectedCallback();\n\n    if (!this.hasAttribute('role')) {\n      this.setAttribute('role', 'listitem');\n    }\n  }\n\n  override focus() {\n    this.itemElement?.focus();\n  }\n\n  override blur() {\n    this.itemElement?.blur();\n  }\n\n  __dispatchClick = (event: MouseEvent | KeyboardEvent) => {\n    // If the button is soft-disabled or a disabled link, we need to explicitly\n    // prevent the click from propagating to other event listeners as well as\n    // prevent the default action.\n    if (this.softDisabled || (this.disabled && this.href) || this.skeleton) {\n      event.stopImmediatePropagation();\n      event.preventDefault();\n      return;\n    }\n\n    if (!isActivationClick(event) || !this.itemElement) {\n      return;\n    }\n\n    this.focus();\n    dispatchActivationClick(this.itemElement);\n  };\n\n  private __hasNamedSlot(...names: string[]) {\n    return names.some(name =>\n      Array.from(this.children).some(\n        child => child.getAttribute('slot') === name,\n      ),\n    );\n  }\n\n  render() {\n    const isElementLink = isLink(this);\n\n    const cssClasses = {\n      'list-item': true,\n      'native-button': !isElementLink,\n      'native-link': isElementLink,\n    };\n\n    // Needed for closure conformance\n    const { ariaLabel } = this as ARIAMixinStrict;\n\n    if (!isElementLink) {\n      return html`\n        <button\n          id=\"list-item\"\n          class=${classMap(cssClasses)}\n          ?disabled=${this.disabled}\n          aria-label=\"${ariaLabel || nothing}\"\n          ?aria-disabled=${this.softDisabled}\n          @click=${this.__dispatchClick}\n        >\n          ${this.renderContent()}\n        </button>\n      `;\n    }\n\n    return html`\n      <a\n        id=\"list-item\"\n        class=${classMap(cssClasses)}\n        href=${this.href}\n        target=${this.target}\n        rel=${ifDefined(this.rel)}\n        download=${ifDefined(this.download)}\n        tabindex=${this.disabled ? '-1' : '0'}\n        aria-disabled=${String(this.disabled || this.softDisabled)}\n        @click=${this.__dispatchClick}\n      >\n        ${this.renderContent()}\n      </a>\n    `;\n  }\n\n  renderContent() {\n    const hasLeading = this.__hasNamedSlot('leading');\n    const hasTrailingSupportingText = this.__hasNamedSlot(\n      'trailing-supporting-text',\n    );\n    const hasTrailing = this.__hasNamedSlot('trailing');\n\n    return html`\n      <wc-item class=\"list-item-content\">\n        <wc-focus-ring\n          class=\"focus-ring\"\n          for=\"list-item\"\n          slot=\"container\"\n        ></wc-focus-ring>\n        <div class=\"background\" slot=\"container\"></div>\n        <wc-ripple class=\"ripple\" for=\"list-item\" slot=\"container\"></wc-ripple>\n        <wc-skeleton class=\"skeleton\" slot=\"container\"></wc-skeleton>\n\n        <slot name=\"leading\" slot=\"start\" ?hidden=${!hasLeading}></slot>\n        <slot name=\"overline\" slot=\"overline\"></slot>\n        <slot name=\"headline\" slot=\"headline\"></slot>\n        <slot></slot>\n        <slot name=\"supporting-text\" slot=\"supporting-text\"></slot>\n\n        <slot\n          name=\"trailing-supporting-text\"\n          slot=\"trailing-supporting-text\"\n          ?hidden=${!hasTrailingSupportingText}\n        ></slot>\n        <slot name=\"trailing\" slot=\"end\" ?hidden=${!hasTrailing}></slot>\n      </wc-item>\n    `;\n  }\n}\n","import { LitElement, html } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport styles from './list.scss';\nimport { ListItem } from './list-item.js';\nimport IndividualComponent from '@/IndividualComponent.js';\n\n/**\n * @label List\n * @tag wc-list\n * @rawTag list\n *\n * @summary A list container for one or more list items.\n *\n * @example\n * ```html\n * <wc-list>\n *   <wc-list-item>\n *     <wc-icon slot=\"leading\" name=\"inbox\"></wc-icon>\n *     Inbox\n *     <span slot=\"trailing\">24</span>\n *   </wc-list-item>\n * </wc-list>\n * ```\n * @tags display\n */\n@IndividualComponent\nexport class List extends LitElement {\n  static styles = [styles];\n\n  static Item = ListItem;\n\n  /**  */\n  @property({ type: String, reflect: true }) variant: 'standard' | 'segmented' =\n    'standard';\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.setAttribute('role', 'list');\n  }\n\n  render() {\n    const cssClasses = {\n      list: true,\n      [`variant-${this.variant}`]: true,\n    };\n\n    return html`\n      <div class=${classMap(cssClasses)}>\n        <slot></slot>\n      </div>\n    `;\n  }\n}\n"],"names":["LitElement","html","classMap","nothing","ifDefined","styles","property","query"],"mappings":"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"}