@redvars/peacock 3.3.3 → 3.5.0

package/dist/bottom-sheet.js

@@ -0,0 +1,238 @@
+import { a as i, _ as __decorate, I as IndividualComponent, i as i$1, A, b } from './IndividualComponent-DUINtMGK.js';
+import { n } from './property-1psGvXOq.js';
+import { r } from './state-DwbEjqVk.js';
+import { e } from './class-map-YU7g0o3B.js';
+import './directive-ZPhl09Yt.js';
+
+var css_248z = i`* {
+  box-sizing: border-box;
+}
+
+.screen-reader-only {
+  display: none !important;
+}
+
+: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);
+}`;
+
+/**
+ * @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
+ */
+let BottomSheet = class BottomSheet extends i$1 {
+    constructor() {
+        super(...arguments);
+        /** Whether the sheet is visible. */
+        this.open = false;
+        /**
+         * Sheet variant.
+         * - `"standard"`: Coexists with page content; no scrim.
+         * - `"modal"`: Overlays page content with a scrim backdrop.
+         */
+        this.variant = 'modal';
+        /** Whether to show the drag handle. */
+        this.showHandle = true;
+        this._dragging = false;
+        this._dragStartY = 0;
+        this._dragOffsetY = 0;
+    }
+    show() {
+        this.open = true;
+    }
+    hide() {
+        this._close('programmatic');
+    }
+    _close(reason) {
+        if (!this.open)
+            return;
+        this.open = false;
+        this.dispatchEvent(new CustomEvent('bottom-sheet-close', {
+            detail: { reason },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    _handleScrimClick() {
+        if (this.variant === 'modal') {
+            this._close('scrim');
+        }
+    }
+    _handleDragStart(e) {
+        this._dragging = true;
+        this._dragStartY = e.clientY;
+        this._dragOffsetY = 0;
+        e.currentTarget.setPointerCapture(e.pointerId);
+    }
+    _handleDragMove(e) {
+        if (!this._dragging)
+            return;
+        const delta = e.clientY - this._dragStartY;
+        this._dragOffsetY = Math.max(0, delta);
+    }
+    _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 b `
+      ${this.variant === 'modal'
+            ? b `<div
+            class=${e({ scrim: true, visible: this.open })}
+            @click=${this._handleScrimClick}
+          ></div>`
+            : A}
+
+      <div
+        class=${e({
+            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
+            ? b `<div
+              class="handle-area"
+              @pointerdown=${this._handleDragStart}
+              @pointermove=${this._handleDragMove}
+              @pointerup=${this._handleDragEnd}
+              @pointercancel=${this._handleDragEnd}
+            >
+              <div class="handle"></div>
+            </div>`
+            : A}
+
+        <div class="content">
+          <slot></slot>
+        </div>
+      </div>
+    `;
+    }
+};
+BottomSheet.styles = [css_248z];
+__decorate([
+    n({ type: Boolean, reflect: true })
+], BottomSheet.prototype, "open", void 0);
+__decorate([
+    n({ type: String, reflect: true })
+], BottomSheet.prototype, "variant", void 0);
+__decorate([
+    n({ type: Boolean, attribute: 'show-handle' })
+], BottomSheet.prototype, "showHandle", void 0);
+__decorate([
+    r()
+], BottomSheet.prototype, "_dragging", void 0);
+__decorate([
+    r()
+], BottomSheet.prototype, "_dragStartY", void 0);
+__decorate([
+    r()
+], BottomSheet.prototype, "_dragOffsetY", void 0);
+BottomSheet = __decorate([
+    IndividualComponent
+], BottomSheet);
+
+export { BottomSheet };
+//# sourceMappingURL=bottom-sheet.js.map

package/dist/bottom-sheet.js.map

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