@redvars/peacock 3.3.3 → 3.4.0

package/dist/{unsafe-html-C2r3PyzF.js.map → unsafe-html-D3GHRaGQ.js.map}

@@ -1 +1 @@
-{"version":3,"file":"unsafe-html-C2r3PyzF.js","sources":["../node_modules/lit-html/directives/unsafe-html.js"],"sourcesContent":["import{nothing as t,noChange as i}from\"../lit-html.js\";import{directive as r,Directive as s,PartType as n}from\"../directive.js\";\n/**\n * @license\n * Copyright 2017 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */class e extends s{constructor(i){if(super(i),this.it=t,i.type!==n.CHILD)throw Error(this.constructor.directiveName+\"() can only be used in child bindings\")}render(r){if(r===t||null==r)return this._t=void 0,this.it=r;if(r===i)return r;if(\"string\"!=typeof r)throw Error(this.constructor.directiveName+\"() called with a non-string value\");if(r===this.it)return this._t;this.it=r;const s=[r];return s.raw=s,this._t={_$litType$:this.constructor.resultType,strings:s,values:[]}}}e.directiveName=\"unsafeHTML\",e.resultType=1;const o=r(e);export{e as UnsafeHTMLDirective,o as unsafeHTML};\n//# sourceMappingURL=unsafe-html.js.map\n"],"names":["s","t","n","i","r"],"mappings":";;;AACA;AACA;AACA;AACA;AACA,GAAG,MAAM,CAAC,SAASA,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,CAACC,CAAC,CAAC,CAAC,CAAC,IAAI,GAAGC,CAAC,CAAC,KAAK,CAAC,MAAM,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,uCAAuC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,GAAGD,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC,OAAO,IAAI,CAAC,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,GAAGE,CAAC,CAAC,OAAO,CAAC,CAAC,GAAG,QAAQ,EAAE,OAAO,CAAC,CAAC,MAAM,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,mCAAmC,CAAC,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC,EAAE,CAAC,OAAO,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,UAAU,CAAC,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,aAAa,CAAC,YAAY,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAM,MAAC,CAAC,CAACC,GAAC,CAAC,CAAC;;;;","x_google_ignoreList":[0]}
+{"version":3,"file":"unsafe-html-D3GHRaGQ.js","sources":["../node_modules/lit-html/directives/unsafe-html.js"],"sourcesContent":["import{nothing as t,noChange as i}from\"../lit-html.js\";import{directive as r,Directive as s,PartType as n}from\"../directive.js\";\n/**\n * @license\n * Copyright 2017 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */class e extends s{constructor(i){if(super(i),this.it=t,i.type!==n.CHILD)throw Error(this.constructor.directiveName+\"() can only be used in child bindings\")}render(r){if(r===t||null==r)return this._t=void 0,this.it=r;if(r===i)return r;if(\"string\"!=typeof r)throw Error(this.constructor.directiveName+\"() called with a non-string value\");if(r===this.it)return this._t;this.it=r;const s=[r];return s.raw=s,this._t={_$litType$:this.constructor.resultType,strings:s,values:[]}}}e.directiveName=\"unsafeHTML\",e.resultType=1;const o=r(e);export{e as UnsafeHTMLDirective,o as unsafeHTML};\n//# sourceMappingURL=unsafe-html.js.map\n"],"names":["s","t","n","i","r"],"mappings":";;;AACA;AACA;AACA;AACA;AACA,GAAG,MAAM,CAAC,SAASA,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,CAACC,CAAC,CAAC,CAAC,CAAC,IAAI,GAAGC,CAAC,CAAC,KAAK,CAAC,MAAM,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,uCAAuC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,GAAGD,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC,OAAO,IAAI,CAAC,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,GAAGE,CAAC,CAAC,OAAO,CAAC,CAAC,GAAG,QAAQ,EAAE,OAAO,CAAC,CAAC,MAAM,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,mCAAmC,CAAC,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC,EAAE,CAAC,OAAO,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,UAAU,CAAC,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,aAAa,CAAC,YAAY,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAM,MAAC,CAAC,CAACC,GAAC,CAAC,CAAC;;;;","x_google_ignoreList":[0]}

package/package.json

@@ -2,7 +2,7 @@
   "name": "@redvars/peacock",
   "description": "The foundation for beautiful user interfaces",
   "license": "Apache-2.0",
-  "version": "3.3.3",
+  "version": "3.4.0",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",

package/readme.md

@@ -44,9 +44,9 @@ 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.3/dist/assets/styles.css"></link>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@redvars/peacock@3.4.0/dist/assets/styles.css"></link>
   <script type='module'
-          src='https://cdn.jsdelivr.net/npm/@redvars/peacock@3.3.3/dist/peacock-loader.js'></script>
+          src='https://cdn.jsdelivr.net/npm/@redvars/peacock@3.4.0/dist/peacock-loader.js'></script>
 </head>
 
 <wc-button>Button</wc-button>

package/src/bottom-sheet/bottom-sheet.scss

@@ -0,0 +1,88 @@
+@use "../../scss/mixin";
+
+@include mixin.base-styles;
+
+:host {
+  display: contents;
+
+  --bottom-sheet-container-color: var(--color-surface-container-low, #f7f2fa);
+  --bottom-sheet-scrim-color: rgba(0, 0, 0, 0.32);
+  --bottom-sheet-shape: var(--shape-corner-extra-large, 28px);
+  --bottom-sheet-max-height: 90dvh;
+  --bottom-sheet-handle-color: var(--color-on-surface-variant, #49454f);
+  --bottom-sheet-transition-duration: var(--duration-medium2, 300ms);
+  --bottom-sheet-transition-easing: var(--easing-standard, cubic-bezier(0.2, 0, 0, 1));
+}
+
+.scrim {
+  inset: 0;
+  position: fixed;
+  background-color: var(--bottom-sheet-scrim-color);
+  opacity: 0;
+  pointer-events: none;
+  transition:
+    opacity var(--bottom-sheet-transition-duration) var(--bottom-sheet-transition-easing);
+  z-index: 1000;
+}
+
+.scrim.visible {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.sheet {
+  background-color: var(--bottom-sheet-container-color);
+  border-radius: var(--bottom-sheet-shape) var(--bottom-sheet-shape) 0 0;
+  bottom: 0;
+  display: flex;
+  flex-direction: column;
+  left: 0;
+  max-height: var(--bottom-sheet-max-height);
+  overflow: hidden;
+  position: fixed;
+  right: 0;
+  transform: translateY(100%);
+  transition:
+    transform var(--bottom-sheet-transition-duration) var(--bottom-sheet-transition-easing);
+  will-change: transform;
+  z-index: 1001;
+}
+
+.sheet.variant-standard {
+  position: relative;
+  z-index: 1;
+}
+
+.sheet.open {
+  transform: translateY(0);
+}
+
+.sheet.dragging {
+  transition: none;
+}
+
+.handle-area {
+  cursor: grab;
+  display: flex;
+  justify-content: center;
+  padding: var(--spacing-100, 0.5rem) var(--spacing-200, 1rem);
+  touch-action: none;
+}
+
+.handle-area:active {
+  cursor: grabbing;
+}
+
+.handle {
+  background-color: var(--bottom-sheet-handle-color);
+  border-radius: var(--shape-corner-full, 9999px);
+  height: 4px;
+  opacity: 0.4;
+  width: 2rem;
+}
+
+.content {
+  flex: 1 1 auto;
+  overflow-y: auto;
+  padding: var(--spacing-100, 0.5rem) var(--spacing-300, 1.5rem) var(--spacing-300, 1.5rem);
+}

package/src/bottom-sheet/bottom-sheet.ts

@@ -0,0 +1,135 @@
+import { LitElement, html, nothing } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import IndividualComponent from '../IndividualComponent.js';
+import styles from './bottom-sheet.scss';
+
+/**
+ * @label Bottom Sheet
+ * @tag wc-bottom-sheet
+ * @rawTag bottom-sheet
+ * @summary Bottom sheets slide up from the bottom of the screen to reveal additional content. Supports standard and modal variants per Material Design 3.
+ *
+ * @cssprop --bottom-sheet-container-color - Background color of the sheet container.
+ * @cssprop --bottom-sheet-scrim-color - Color of the modal scrim overlay.
+ * @cssprop --bottom-sheet-shape - Corner radius of the top edge.
+ * @cssprop --bottom-sheet-max-height - Maximum height of the sheet.
+ *
+ * @example
+ * ```html
+ * Bottom Sheet
+ * ```
+ * @tags navigation, overlay
+ */
+@IndividualComponent
+export class BottomSheet extends LitElement {
+  static styles = [styles];
+
+  /** Whether the sheet is visible. */
+  @property({ type: Boolean, reflect: true }) open = false;
+
+  /**
+   * Sheet variant.
+   * - `"standard"`: Coexists with page content; no scrim.
+   * - `"modal"`: Overlays page content with a scrim backdrop.
+   */
+  @property({ type: String, reflect: true }) variant: 'standard' | 'modal' =
+    'modal';
+
+  /** Whether to show the drag handle. */
+  @property({ type: Boolean, attribute: 'show-handle' }) showHandle = true;
+
+  @state() private _dragging = false;
+  @state() private _dragStartY = 0;
+  @state() private _dragOffsetY = 0;
+
+  show() {
+    this.open = true;
+  }
+
+  hide() {
+    this._close('programmatic');
+  }
+
+  private _close(reason: string) {
+    if (!this.open) return;
+    this.open = false;
+    this.dispatchEvent(
+      new CustomEvent('bottom-sheet-close', {
+        detail: { reason },
+        bubbles: true,
+        composed: true,
+      }),
+    );
+  }
+
+  private _handleScrimClick() {
+    if (this.variant === 'modal') {
+      this._close('scrim');
+    }
+  }
+
+  private _handleDragStart(e: PointerEvent) {
+    this._dragging = true;
+    this._dragStartY = e.clientY;
+    this._dragOffsetY = 0;
+    (e.currentTarget as HTMLElement).setPointerCapture(e.pointerId);
+  }
+
+  private _handleDragMove(e: PointerEvent) {
+    if (!this._dragging) return;
+    const delta = e.clientY - this._dragStartY;
+    this._dragOffsetY = Math.max(0, delta);
+  }
+
+  private _handleDragEnd() {
+    if (!this._dragging) return;
+    this._dragging = false;
+    if (this._dragOffsetY > 80) {
+      this._close('drag');
+    }
+    this._dragOffsetY = 0;
+  }
+
+  render() {
+    const translateY = this._dragging ? `${this._dragOffsetY}px` : undefined;
+
+    return html`
+      ${this.variant === 'modal'
+        ? html`<div
+            class=${classMap({ scrim: true, visible: this.open })}
+            @click=${this._handleScrimClick}
+          ></div>`
+        : nothing}
+
+      <div
+        class=${classMap({
+          sheet: true,
+          open: this.open,
+          dragging: this._dragging,
+          [`variant-${this.variant}`]: true,
+        })}
+        style=${translateY ? `transform: translateY(${translateY})` : ''}
+        role="dialog"
+        aria-modal=${this.variant === 'modal' ? 'true' : 'false'}
+        aria-hidden=${!this.open ? 'true' : 'false'}
+      >
+        ${this.showHandle
+          ? html`<div
+              class="handle-area"
+              @pointerdown=${this._handleDragStart}
+              @pointermove=${this._handleDragMove}
+              @pointerup=${this._handleDragEnd}
+              @pointercancel=${this._handleDragEnd}
+            >
+              <div class="handle"></div>
+            </div>`
+          : nothing}
+
+        <div class="content">
+          <slot></slot>
+        </div>
+      </div>
+    `;
+  }
+}

package/src/bottom-sheet/index.ts

@@ -0,0 +1 @@
+export { BottomSheet } from './bottom-sheet.js';

package/src/button/BaseButton.ts

@@ -47,7 +47,7 @@ export class BaseButton extends LitElement {
    * Button size.
    * Possible values are `"sm"`, `"md"`, `"lg"`. Defaults to `"md"`.
    */
-  @property() size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'sm';
+  @property({ reflect: true }) size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'sm';
 
   /**
    * If true, the user cannot interact with the button. Defaults to `false`.
@@ -55,12 +55,12 @@ export class BaseButton extends LitElement {
   @property({ type: Boolean, reflect: true })
   disabled: boolean = false;
 
-  @property() skeleton: boolean = false;
+  @property({ type: Boolean, reflect: true }) skeleton: boolean = false;
 
   /**
    * If true, the user cannot interact with the button and the button is visually styled as disabled. But the button is still focusable. Defaults to `false`.
    */
-  @property({ reflect: true, attribute: 'soft-disabled' })
+  @property({ type: Boolean, reflect: true, attribute: 'soft-disabled' })
   softDisabled: boolean = false;
 
   /**
@@ -74,15 +74,20 @@ export class BaseButton extends LitElement {
    */
   @property({ reflect: true }) href?: string;
 
-  @property({ reflect: true })
-  configAria?: { [key: string]: any };
-
   /**
    * Sets or retrieves the window or frame at which to target content.
    */
   @property() target: string = '_self';
+  
+
+  @property({ reflect: true })
+  configAria?: { [key: string]: any };
+
+  
+
+  @property({ type: Boolean, reflect: true }) toggle: boolean = false;
 
-  @property() selected: boolean = false;
+  @property({ type: Boolean, reflect: true }) selected: boolean = false;
 
   /**
    * Sets the delay for throttle in milliseconds. Defaults to 200 milliseconds.
@@ -157,6 +162,10 @@ export class BaseButton extends LitElement {
       return;
     }
 
+    if (this.toggle) {
+      this.selected = !this.selected;
+    }
+
     this.focus();
     dispatchActivationClick(this.buttonElement);
   };

package/src/button/button/button-colors.scss

@@ -18,26 +18,97 @@
   --neo-button-label-text-color: var(--color-on-#{$color});
 }
 
-:host([color=primary]) {
+@mixin _button-color-toggle-unselected($color) {
+
+  --filled-button-container-color: var(--color-surface-container);
+  --filled-button-label-text-color: var(--color-surface-container-variant);
+
+  --tonal-button-container-color: var(--color-#{$color}-container);
+  --tonal-button-label-text-color: var(--color-on-#{$color}-container);
+
+  --elevated-button-container-color: var(--color-surface-container-low);
+  --elevated-button-label-text-color: var(--color-#{$color});
+
+  --outlined-button-outline-color: var(--color-#{$color});
+  --outlined-button-label-text-color:  var(--color-#{$color});
+}
+
+@mixin _button-color-toggle-selected($color) {
+
+  --filled-button-container-color: var(--color-#{$color});
+  --filled-button-label-text-color: var(--color-on-#{$color});
+
+  --tonal-button-container-color: var(--color-#{$color});
+  --tonal-button-label-text-color: var(--color-on-#{$color});
+
+  --elevated-button-container-color: var(--color-#{$color});
+  --elevated-button-label-text-color: var(--color-on-#{$color});
+
+  --outlined-button-outline-color: var(--color-inverse-surface);
+  --outlined-button-label-text-color:  var(--color-inverse-on-surface);
+}
+
+:host([color=primary]:not([toggle])) {
   @include _button-color(primary);
 }
 
-:host([color=secondary]) {
+:host([color=primary][toggle][selected]) {
+  @include _button-color-toggle-selected(primary);
+}
+
+:host([color=primary][toggle]:not([selected])) {
+  @include _button-color-toggle-unselected(primary);
+}
+
+:host([color=secondary]:not([toggle])) {
   @include _button-color(secondary);
 }
 
-:host([color=tertiary]) {
+:host([color=secondary][toggle][selected]) {
+  @include _button-color-toggle-selected(secondary);
+}
+
+:host([color=secondary][toggle]:not([selected])) {
+  @include _button-color-toggle-unselected(secondary);
+}
+
+:host([color=tertiary]:not([toggle])) {
   @include _button-color(tertiary);
 }
 
-:host([color=success]) {
+:host([color=tertiary][toggle][selected]) {
+  @include _button-color-toggle-selected(tertiary);
+}
+
+:host([color=tertiary][toggle]:not([selected])) {
+  @include _button-color-toggle-unselected(tertiary);
+}
+
+:host([color=success]:not([toggle])) {
   @include _button-color(success);
 }
 
-:host([color=danger]) {
+:host([color=success][toggle][selected]) {
+  @include _button-color-toggle-selected(success);
+}
+
+:host([color=success][toggle]:not([selected])) {
+  @include _button-color-toggle-unselected(success);
+}
+
+
+:host([color=danger]:not([toggle])) {
   @include _button-color(error);
 }
 
+:host([color=danger][toggle][selected]) {
+  @include _button-color-toggle-selected(error);
+}
+
+:host([color=danger][toggle]:not([selected])) {
+  @include _button-color-toggle-unselected(error);
+}
+
 
 :host([color=dark]) {
   --filled-button-container-color: var(--color-on-surface);

package/src/button/button/button-sizes.scss

@@ -1,10 +1,15 @@
 @use '../../../scss/mixin';
 
-.button.size-xs,
-.button.size-extra-small {
-  --_button-height: 2rem;
+
+:host([size='xs']),
+:host([size='extra-small']) {
+  --button-height: 2rem;
+}
+
+:host([size='xs']) .button,
+:host([size='extra-small']) .button {
   --_button-icon-size: 1rem;
-  --_container-padding: 0.75rem;
+  --_button_container-padding: 0.75rem;
 
   font-size:  0.875rem !important;
   font-weight: var(--font-weight-medium) !important;
@@ -13,11 +18,15 @@
 }
 
 
-.button.size-sm,
-.button.size-small {
-  --_button-height: 2.5rem;
+:host([size='sm']),
+:host([size='small']) {
+  --button-height: 2.5rem;
+}
+
+:host([size='sm']) .button,
+:host([size='small']) .button {
   --_button-icon-size: 1.25rem;
-  --_container-padding: 1rem;
+  --_button_container-padding: 1rem;
   --_button-icon-label-spacing: 0.5rem;
 
   font-size:  0.875rem !important;
@@ -26,11 +35,15 @@
   letter-spacing: 0.1px !important;
 }
 
-.button.size-md,
-.button.size-medium {
-  --_button-height: 3.5rem;
+:host([size='md']),
+:host([size='medium']) {
+  --button-height: 3.5rem;
+}
+
+:host([size='md']) .button,
+:host([size='medium']) .button {
   --_button-icon-size: 1.5rem;
-  --_container-padding: 1.5rem;
+  --_button_container-padding: 1.5rem;
 
   font-size:  1rem !important;
   font-weight: var(--font-weight-medium) !important;
@@ -38,11 +51,15 @@
   letter-spacing: 0.15px !important;
 }
 
-.button.size-lg,
-.button.size-large {
-  --_button-height: 6rem;
+:host([size='lg']),
+:host([size='large']) {
+  --button-height: 6rem;
+}
+
+:host([size='lg']) .button,
+:host([size='large']) .button {
   --_button-icon-size: 2rem;
-  --_container-padding: 3rem;
+  --_button_container-padding: 3rem;
 
   font-size:  1.5rem !important;
   font-weight: var(--font-weight-regular) !important;
@@ -50,10 +67,13 @@
   letter-spacing: 0 !important;
 }
 
-.button.size-xl {
-  --_button-height: 8.5rem;
+:host([size='xl']) {
+  --button-height: 8.5rem;
+}
+
+:host([size='xl']) .button {
   --_button-icon-size: 2.5rem;
-  --_container-padding: 4rem;
+  --_button_container-padding: 4rem;
 
   font-size:  2rem !important;
   font-weight: var(--font-weight-regular) !important;