wabtec-internal-volt-basic-components 1.0.0

package/dist/collection/components/sheet/vds-sheet.js

@@ -0,0 +1,324 @@
+import { Host, h } from "@stencil/core";
+import { combineClasses } from "../../utils/combine-classes";
+export class VdsSheet {
+    constructor() {
+        /** Create a backdrop that allow's to close the bottom sheet by clicking outside. */
+        this.backdrop = false;
+        /** Open / Close the bottom sheet. */
+        this.opened = false;
+        /** Sets the height of the bottom sheet (any CSS height value: auto, 50%, 400px, etc.) */
+        this.height = 'auto';
+        /** Allow drag handle interaction to close the bottom sheet. */
+        this.hideDragHandle = false;
+        this.dragStartY = 0;
+        this.isDragging = false;
+        this.dragThreshold = 50; // px threshold to close bottom sheet
+        /**
+         * Handle drag interactions to close the bottom sheet.
+         */
+        this.handleDragStart = (event) => {
+            if (this.hideDragHandle)
+                return;
+            this.isDragging = true;
+            this.dragStartY = this.getClientY(event);
+            if ('touches' in event) {
+                document.addEventListener('touchmove', this.handleDragMove, { passive: false });
+                document.addEventListener('touchend', this.handleDragEnd);
+            }
+            else {
+                document.addEventListener('mousemove', this.handleDragMove);
+                document.addEventListener('mouseup', this.handleDragEnd);
+            }
+            if (event.cancelable) {
+                event.preventDefault();
+            }
+        };
+        this.handleDragMove = (event) => {
+            var _a;
+            if (!this.isDragging || this.hideDragHandle)
+                return;
+            const currentY = this.getClientY(event);
+            const deltaY = currentY - this.dragStartY;
+            // Only allow dragging downward (positive deltaY)
+            if (deltaY > 0) {
+                const container = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.vds-sheet__container');
+                if (container) {
+                    container.style.transform = `translateY(${deltaY}px)`;
+                }
+            }
+            if (event.cancelable) {
+                event.preventDefault();
+            }
+        };
+        this.handleDragEnd = (event) => {
+            var _a;
+            if (!this.isDragging || this.hideDragHandle)
+                return;
+            const currentY = this.getClientY(event);
+            const deltaY = currentY - this.dragStartY;
+            const container = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.vds-sheet__container');
+            if (container) {
+                container.style.transform = '';
+                if (deltaY > this.dragThreshold) {
+                    this.close();
+                }
+            }
+            document.removeEventListener('touchmove', this.handleDragMove);
+            document.removeEventListener('touchend', this.handleDragEnd);
+            document.removeEventListener('mousemove', this.handleDragMove);
+            document.removeEventListener('mouseup', this.handleDragEnd);
+            this.isDragging = false;
+            this.dragStartY = 0;
+        };
+    }
+    emitValue() {
+        if (this.opened) {
+            this.bottomsheetOpened.emit();
+        }
+        else {
+            this.bottomsheetClosed.emit();
+        }
+    }
+    /** Listen for Escape key to close the bottom sheet */
+    handleKeyDown(event) {
+        if (event.key === 'Escape' && this.opened) {
+            this.close();
+        }
+    }
+    /**
+     * Trigger open the bottomsheet
+     * @returns Promise that resolves when the bottomsheet is opened
+     */
+    async open() {
+        this.opened = true;
+    }
+    /**
+     * Trigger closes the bottomsheet
+     * @returns Promise that resolves when the bottomsheet is closed
+     */
+    async close() {
+        this.opened = false;
+    }
+    getClientY(event) {
+        if ('touches' in event) {
+            const touch = event.touches[0] || event.changedTouches[0];
+            return touch.clientY;
+        }
+        return event.clientY;
+    }
+    /**
+     * Get the style for the container based on the height prop
+     * If the height is a percentage, it converts it to viewport height.
+     */
+    getContainerStyle() {
+        if (this.height === 'auto') {
+            return {};
+        }
+        if (this.height.includes('%')) {
+            const percentValue = parseFloat(this.height);
+            return { height: `${percentValue}vh` };
+        }
+        return { height: this.height };
+    }
+    renderBackdrop() {
+        return h("div", { class: combineClasses('vds-sheet__backdrop', this.opened ? 'vds-sheet__backdrop--visible' : ''), onClick: () => this.close() });
+    }
+    renderDragHandle() {
+        if (this.hideDragHandle)
+            return null;
+        return (h("div", { class: "vds-sheet__drag-handle", onTouchStart: this.handleDragStart, onMouseDown: this.handleDragStart }, h("div", { class: "vds-sheet__drag-handle-bar" })));
+    }
+    render() {
+        return (h(Host, { key: 'fd605460c0ce83cd58c4ae1b213d783a8b962f6b', role: "dialog", "aria-hidden": !this.opened ? 'true' : 'false', "aria-modal": this.opened ? 'true' : 'false', class: this.opened ? 'vds-sheet--opened' : 'vds-sheet--closed' }, this.backdrop && this.renderBackdrop(), h("div", { key: 'b96170f287ee0e872b2bf06454584c81a257cb46', class: combineClasses('vds-sheet__container', this.opened ? 'vds-sheet__container--opened' : ''), style: this.getContainerStyle() }, this.renderDragHandle(), h("div", { key: '9d5ae9e92e3b1bea23925446f08b60e78bed3626', class: "vds-sheet__content" }, h("slot", { key: '576096ee264c76765010a046651e433a6a4f8b90' })))));
+    }
+    static get is() { return "vds-sheet"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["vds-sheet.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["vds-sheet.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "backdrop": {
+                "type": "boolean",
+                "attribute": "backdrop",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Create a backdrop that allow's to close the bottom sheet by clicking outside."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "opened": {
+                "type": "boolean",
+                "attribute": "opened",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Open / Close the bottom sheet."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "height": {
+                "type": "string",
+                "attribute": "height",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the height of the bottom sheet (any CSS height value: auto, 50%, 400px, etc.)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'auto'"
+            },
+            "hideDragHandle": {
+                "type": "boolean",
+                "attribute": "hide-drag-handle",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Allow drag handle interaction to close the bottom sheet."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "bottomsheetOpened",
+                "name": "bottomsheetOpened",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emits event when bottom-sheet is opened"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "bottomsheetClosed",
+                "name": "bottomsheetClosed",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emits event when bottom-sheet is closed"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "open": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Trigger open the bottomsheet",
+                    "tags": [{
+                            "name": "returns",
+                            "text": "Promise that resolves when the bottomsheet is opened"
+                        }]
+                }
+            },
+            "close": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Trigger closes the bottomsheet",
+                    "tags": [{
+                            "name": "returns",
+                            "text": "Promise that resolves when the bottomsheet is closed"
+                        }]
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "opened",
+                "methodName": "emitValue"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "keydown",
+                "method": "handleKeyDown",
+                "target": "document",
+                "capture": false,
+                "passive": false
+            }];
+    }
+}
+//# sourceMappingURL=vds-sheet.js.map

package/dist/collection/components/sheet/vds-sheet.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"vds-sheet.js","sourceRoot":"","sources":["../../../src/components/sheet/vds-sheet.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, Method, EventEmitter, Event, Watch, Listen, Element } from '@stencil/core';\nimport { HTMLStencilElement } from '@stencil/core/internal';\nimport { combineClasses } from '../../utils/combine-classes';\n\n@Component({\n  tag: 'vds-sheet',\n  styleUrl: 'vds-sheet.scss',\n  shadow: true,\n})\nexport class VdsSheet {\n  /** Create a backdrop that allow's to close the bottom sheet by clicking outside. */\n  @Prop() backdrop: boolean = false;\n  /** Open / Close the bottom sheet. */\n  @Prop({ mutable: true }) opened: boolean = false;\n  /** Sets the height of the bottom sheet (any CSS height value: auto, 50%, 400px, etc.) */\n  @Prop() height: string = 'auto';\n  /** Allow drag handle interaction to close the bottom sheet. */\n  @Prop() hideDragHandle: boolean = false;\n\n  /** Emits event when bottom-sheet is opened */\n  @Event() bottomsheetOpened: EventEmitter<void>;\n  /** Emits event when bottom-sheet is closed */\n  @Event() bottomsheetClosed: EventEmitter<void>;\n\n  @Element() el: HTMLElement;\n\n  private dragStartY: number = 0;\n  private isDragging: boolean = false;\n  private dragThreshold: number = 50; // px threshold to close bottom sheet\n\n  @Watch('opened')\n  emitValue(): void {\n    if (this.opened) {\n      this.bottomsheetOpened.emit();\n    } else {\n      this.bottomsheetClosed.emit();\n    }\n  }\n\n  /** Listen for Escape key to close the bottom sheet */\n  @Listen('keydown', { target: 'document' })\n  handleKeyDown(event: KeyboardEvent): void {\n    if (event.key === 'Escape' && this.opened) {\n      this.close();\n    }\n  }\n\n  /**\n   * Trigger open the bottomsheet\n   * @returns Promise that resolves when the bottomsheet is opened\n   */\n  @Method()\n  async open(): Promise<void> {\n    this.opened = true;\n  }\n\n  /**\n   * Trigger closes the bottomsheet\n   * @returns Promise that resolves when the bottomsheet is closed\n   */\n  @Method()\n  async close(): Promise<void> {\n    this.opened = false;\n  }\n\n  /**\n   * Handle drag interactions to close the bottom sheet.\n   */\n  private handleDragStart = (event: TouchEvent | MouseEvent): void => {\n    if (this.hideDragHandle) return;\n\n    this.isDragging = true;\n    this.dragStartY = this.getClientY(event);\n\n    if ('touches' in event) {\n      document.addEventListener('touchmove', this.handleDragMove, { passive: false });\n      document.addEventListener('touchend', this.handleDragEnd);\n    } else {\n      document.addEventListener('mousemove', this.handleDragMove);\n      document.addEventListener('mouseup', this.handleDragEnd);\n    }\n\n    if (event.cancelable) {\n      event.preventDefault();\n    }\n  };\n\n  private handleDragMove = (event: TouchEvent | MouseEvent): void => {\n    if (!this.isDragging || this.hideDragHandle) return;\n\n    const currentY = this.getClientY(event);\n    const deltaY = currentY - this.dragStartY;\n\n    // Only allow dragging downward (positive deltaY)\n    if (deltaY > 0) {\n      const container = this.el.shadowRoot?.querySelector('.vds-sheet__container') as HTMLElement;\n      if (container) {\n        container.style.transform = `translateY(${deltaY}px)`;\n      }\n    }\n\n    if (event.cancelable) {\n      event.preventDefault();\n    }\n  };\n\n  private handleDragEnd = (event: TouchEvent | MouseEvent): void => {\n    if (!this.isDragging || this.hideDragHandle) return;\n\n    const currentY = this.getClientY(event);\n    const deltaY = currentY - this.dragStartY;\n    const container = this.el.shadowRoot?.querySelector('.vds-sheet__container') as HTMLElement;\n\n    if (container) {\n      container.style.transform = '';\n\n      if (deltaY > this.dragThreshold) {\n        this.close();\n      }\n    }\n\n    document.removeEventListener('touchmove', this.handleDragMove);\n    document.removeEventListener('touchend', this.handleDragEnd);\n    document.removeEventListener('mousemove', this.handleDragMove);\n    document.removeEventListener('mouseup', this.handleDragEnd);\n\n    this.isDragging = false;\n    this.dragStartY = 0;\n  };\n\n  private getClientY(event: TouchEvent | MouseEvent): number {\n    if ('touches' in event) {\n      const touch = event.touches[0] || event.changedTouches[0];\n      return touch.clientY;\n    }\n    return event.clientY;\n  }\n\n  /**\n   * Get the style for the container based on the height prop\n   * If the height is a percentage, it converts it to viewport height.\n   */\n  private getContainerStyle(): { [key: string]: string } {\n    if (this.height === 'auto') {\n      return {};\n    }\n    if (this.height.includes('%')) {\n      const percentValue = parseFloat(this.height);\n      return { height: `${percentValue}vh` };\n    }\n\n    return { height: this.height };\n  }\n\n  private renderBackdrop(): HTMLStencilElement {\n    return <div class={combineClasses('vds-sheet__backdrop', this.opened ? 'vds-sheet__backdrop--visible' : '')} onClick={() => this.close()}></div>;\n  }\n\n  private renderDragHandle(): HTMLStencilElement {\n    if (this.hideDragHandle) return null;\n\n    return (\n      <div class=\"vds-sheet__drag-handle\" onTouchStart={this.handleDragStart} onMouseDown={this.handleDragStart}>\n        <div class=\"vds-sheet__drag-handle-bar\"></div>\n      </div>\n    );\n  }\n\n  render(): HTMLStencilElement {\n    return (\n      <Host role=\"dialog\" aria-hidden={!this.opened ? 'true' : 'false'} aria-modal={this.opened ? 'true' : 'false'} class={this.opened ? 'vds-sheet--opened' : 'vds-sheet--closed'}>\n        {this.backdrop && this.renderBackdrop()}\n        <div class={combineClasses('vds-sheet__container', this.opened ? 'vds-sheet__container--opened' : '')} style={this.getContainerStyle()}>\n          {this.renderDragHandle()}\n          <div class=\"vds-sheet__content\">\n            <slot></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/sheet/vds-sheet.stories.js

@@ -0,0 +1,257 @@
+export default {
+    title: 'VDS/Components/Sheet',
+    parameters: {
+        docs: {
+            toc: true,
+        },
+        design: {
+            type: 'figma',
+            url: 'https://www.figma.com/design/pWWQH7I7zAkgkBKIuRG53Y/Volt-2?node-id=29286-198023&m=dev',
+        },
+    },
+};
+const styles = `
+  .trigger-container {
+    padding: 2rem;
+    display: flex;
+    justify-content: center;
+  }
+`;
+const codeTemplate = args => {
+    return `
+<style>${styles}</style>
+<div class="container">
+    <div class="trigger-container">
+        <vds-button 
+            variant="primary" 
+            size="medium" 
+            onclick="document.querySelector('vds-sheet').open()">
+            Open Bottom Sheet
+        </vds-button>
+    </div>
+    <vds-sheet
+        opened="${args.opened}"
+        backdrop="${args.backdrop}"
+        hide-drag-handle="${args.hideDragHandle}"
+        height="${args.height}"
+    >
+        <div class="sheet-content">
+            <h2>Sheet Content</h2>
+            <p>This is the content of the sheet.</p>
+        </div>
+    </vds-sheet>
+</div>
+    `;
+};
+export const BasicUsage = codeTemplate.bind({});
+BasicUsage.args = {
+    opened: false,
+    backdrop: true,
+    hideDragHandle: false,
+    height: 'auto',
+};
+const richStyles = `
+  .trigger-container {
+    padding: 2rem;
+    display: flex;
+    justify-content: center;
+  }
+  .sheet-content {
+    padding: 1rem;
+  }
+  .content-section {
+    margin-bottom: 1.5rem;
+  }
+  .badges-container {
+    display: flex;
+    gap: 0.5rem;
+    margin: 1rem 0;
+  }
+  .actions-container {
+    display: flex;
+    gap: 1rem;
+    justify-content: flex-end;
+    margin-top: 2rem;
+  }
+`;
+const richContentCodeTemplate = args => {
+    return `
+<style>${richStyles}</style>
+<div class="container">
+    <div class="trigger-container">
+        <vds-button 
+            variant="primary" 
+            size="medium" 
+            onclick="document.querySelector('vds-sheet').open()">
+            Open Profile Settings
+        </vds-button>
+    </div>
+    <vds-sheet
+        opened="${args.opened}"
+        backdrop="${args.backdrop}"
+        hide-drag-handle="${args.hideDragHandle}"
+        height="${args.height}"
+    >
+        <div class="sheet-content">
+            <div class="content-section">
+                <h2>User Profile Settings</h2>
+                <p>Manage your account preferences and notification settings.</p>
+            </div>
+            
+            <div class="content-section">
+                <h3>Status Badges</h3>
+                <div class="badges-container">
+                    <vds-badge-pill status-color="healthy" value="Active"></vds-badge-pill>
+                    <vds-badge-pill status-color="information" value="Premium"></vds-badge-pill>
+                    <vds-badge-pill status-color="warning" value="Pending Review"></vds-badge-pill>
+                </div>
+            </div>
+
+            <div class="content-section">
+                <vds-field label="Notification Preferences" size="medium">
+                    <vds-basic-dropdown 
+                        placeholder="Choose notification frequency" 
+                        value="Daily"
+                        size="medium"
+                        match-width="true">
+                        <vds-dropdown-item value="Real-time" label="Real-time"></vds-dropdown-item>
+                        <vds-dropdown-item value="Hourly" label="Hourly"></vds-dropdown-item>
+                        <vds-dropdown-item value="Daily" label="Daily"></vds-dropdown-item>
+                        <vds-dropdown-item value="Weekly" label="Weekly"></vds-dropdown-item>
+                        <vds-dropdown-item value="Never" label="Never"></vds-dropdown-item>
+                    </vds-basic-dropdown>
+                </vds-field>
+            </div>
+
+            <div class="actions-container">
+                <vds-button 
+                    variant="secondary" 
+                    size="medium"
+                    onclick="document.querySelector('vds-sheet').close()">
+                    Cancel
+                </vds-button>
+                <vds-button variant="primary" size="medium">Save Changes</vds-button>
+            </div>
+        </div>
+    </vds-sheet>
+</div>
+    `;
+};
+export const RichContent = richContentCodeTemplate.bind({});
+RichContent.args = {
+    opened: false,
+    backdrop: true,
+    hideDragHandle: false,
+    height: '70%',
+};
+const customStyles = `
+  .trigger-container {
+    padding: 2rem;
+    display: flex;
+    justify-content: center;
+  }
+  .sheet-content {
+    padding: 1.5rem;
+    text-align: center;
+  }
+  .theme-demo {
+    margin-bottom: 1rem;
+  }
+  .color-swatches {
+    display: flex;
+    gap: 1rem;
+    justify-content: center;
+    margin: 1rem 0;
+  }
+  .swatch {
+    width: 40px;
+    height: 40px;
+    border-radius: 8px;
+    border: 2px solid var(--color-border-low);
+  }
+  .swatch.bg { background-color: var(--vds-sheet-background-color, #f8f9fa); }
+  .swatch.handle { background-color: var(--vds-sheet-drag-handle-color, #6c757d); }
+  .swatch.shadow { 
+    background: linear-gradient(135deg, rgba(0,0,0,0.1), rgba(0,0,0,0.3));
+    box-shadow: var(--vds-sheet-box-shadow, 0 2px 8px rgba(0,0,0,0.1));
+  }
+`;
+const customUsageCodeTemplate = args => {
+    return `
+<style>${customStyles}</style>
+<div class="container">
+    <div class="trigger-container">
+        <vds-button 
+            variant="primary" 
+            size="medium" 
+            onclick="document.querySelector('vds-sheet').open()">
+            Open VDS Green Theme Sheet
+        </vds-button>
+    </div>
+    <vds-sheet
+        opened="${args.opened}"
+        backdrop="${args.backdrop}"
+        hide-drag-handle="${args.hideDragHandle}"
+        height="${args.height}"
+        style="
+            --vds-sheet-background-color: var(--color-background-healthy-lowest-default);
+            --vds-sheet-backdrop-color: var(--color-background-healthy-lowest-hover);
+            --vds-sheet-box-shadow: var(--elevation-shadow-5);
+            --vds-sheet-border-radius: 100px;
+            --vds-sheet-drag-handle-color: var(--color-icon-healthy);
+            --vds-sheet-transition-duration: 0.4s;
+        "
+    >
+        <div class="sheet-content">
+            <div class="theme-demo">
+                <h2 style="color: var(--color-text-healthy-high); margin-bottom: 0.5rem;">VDS Green Theme Demo</h2>
+                <p style="color: var(--color-text-healthy-medium);">This sheet demonstrates a green color scheme using VDS healthy color tokens from the design system.</p>
+            </div>
+            
+            <div class="theme-demo">
+                <h3 style="color: var(--color-text-healthy-high); font-size: 1rem; margin-bottom: 1rem;">VDS Healthy Colors</h3>
+                <div class="color-swatches">
+                    <div class="swatch bg" title="Background (--color-background-healthy-lowest-default)"></div>
+                    <div class="swatch handle" title="Drag Handle (--color-icon-healthy)"></div>
+                    <div class="swatch shadow" title="Elevation Shadow (--elevation-shadow-5)"></div>
+                </div>
+                <p style="color: var(--color-text-high); font-size: 0.875rem;">Background • Handle • Shadow</p>
+            </div>
+
+            <div class="theme-demo">
+                <vds-field label="Theme Settings" size="medium">
+                    <vds-basic-dropdown 
+                        placeholder="Choose theme variant" 
+                        value="Green"
+                        size="medium"
+                        match-width="true">
+                        <vds-dropdown-item value="Light" label="Light Theme"></vds-dropdown-item>
+                        <vds-dropdown-item value="Green" label="VDS Green Theme"></vds-dropdown-item>
+                        <vds-dropdown-item value="Dark" label="Dark Theme"></vds-dropdown-item>
+                        <vds-dropdown-item value="Auto" label="Auto Theme"></vds-dropdown-item>
+                    </vds-basic-dropdown>
+                </vds-field>
+            </div>
+
+            <div style="margin-top: 2rem; display: flex; gap: 1rem; justify-content: center;">
+                <vds-button 
+                    variant="secondary" 
+                    size="medium"
+                    onclick="document.querySelector('vds-sheet').close()">
+                    Close
+                </vds-button>
+                <vds-button variant="primary" size="medium">Apply Theme</vds-button>
+            </div>
+        </div>
+    </vds-sheet>
+</div>
+    `;
+};
+export const CustomUsage = customUsageCodeTemplate.bind({});
+CustomUsage.args = {
+    opened: false,
+    backdrop: true,
+    hideDragHandle: false,
+    height: '60%',
+};
+//# sourceMappingURL=vds-sheet.stories.js.map

package/dist/collection/components/sheet/vds-sheet.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"vds-sheet.stories.js","sourceRoot":"","sources":["../../../src/components/sheet/vds-sheet.stories.tsx"],"names":[],"mappings":"AAAA,eAAe;IACb,KAAK,EAAE,sBAAsB;IAC7B,UAAU,EAAE;QACV,IAAI,EAAE;YACJ,GAAG,EAAE,IAAI;SACV;QACD,MAAM,EAAE;YACN,IAAI,EAAE,OAAO;YACb,GAAG,EAAE,uFAAuF;SAC7F;KACF;CACF,CAAC;AAEF,MAAM,MAAM,GAAG;;;;;;CAMd,CAAC;AAEF,MAAM,YAAY,GAAG,IAAI,CAAC,EAAE;IAC1B,OAAO;SACA,MAAM;;;;;;;;;;;kBAWG,IAAI,CAAC,MAAM;oBACT,IAAI,CAAC,QAAQ;4BACL,IAAI,CAAC,cAAc;kBAC7B,IAAI,CAAC,MAAM;;;;;;;;KAQxB,CAAC;AACN,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAG,YAAY,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAEhD,UAAU,CAAC,IAAI,GAAG;IAChB,MAAM,EAAE,KAAK;IACb,QAAQ,EAAE,IAAI;IACd,cAAc,EAAE,KAAK;IACrB,MAAM,EAAE,MAAM;CACf,CAAC;AAEF,MAAM,UAAU,GAAG;;;;;;;;;;;;;;;;;;;;;;;CAuBlB,CAAC;AAEF,MAAM,uBAAuB,GAAG,IAAI,CAAC,EAAE;IACrC,OAAO;SACA,UAAU;;;;;;;;;;;kBAWD,IAAI,CAAC,MAAM;oBACT,IAAI,CAAC,QAAQ;4BACL,IAAI,CAAC,cAAc;kBAC7B,IAAI,CAAC,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA6CxB,CAAC;AACN,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,uBAAuB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAE5D,WAAW,CAAC,IAAI,GAAG;IACjB,MAAM,EAAE,KAAK;IACb,QAAQ,EAAE,IAAI;IACd,cAAc,EAAE,KAAK;IACrB,MAAM,EAAE,KAAK;CACd,CAAC;AAEF,MAAM,YAAY,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+BpB,CAAC;AAEF,MAAM,uBAAuB,GAAG,IAAI,CAAC,EAAE;IACrC,OAAO;SACA,YAAY;;;;;;;;;;;kBAWH,IAAI,CAAC,MAAM;oBACT,IAAI,CAAC,QAAQ;4BACL,IAAI,CAAC,cAAc;kBAC7B,IAAI,CAAC,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAqDxB,CAAC;AACN,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,uBAAuB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAE5D,WAAW,CAAC,IAAI,GAAG;IACjB,MAAM,EAAE,KAAK;IACb,QAAQ,EAAE,IAAI;IACd,cAAc,EAAE,KAAK;IACrB,MAAM,EAAE,KAAK;CACd,CAAC","sourcesContent":["export default {\n  title: 'VDS/Components/Sheet',\n  parameters: {\n    docs: {\n      toc: true,\n    },\n    design: {\n      type: 'figma',\n      url: 'https://www.figma.com/design/pWWQH7I7zAkgkBKIuRG53Y/Volt-2?node-id=29286-198023&m=dev',\n    },\n  },\n};\n\nconst styles = `\n  .trigger-container {\n    padding: 2rem;\n    display: flex;\n    justify-content: center;\n  }\n`;\n\nconst codeTemplate = args => {\n  return `\n<style>${styles}</style>\n<div class=\"container\">\n    <div class=\"trigger-container\">\n        <vds-button \n            variant=\"primary\" \n            size=\"medium\" \n            onclick=\"document.querySelector('vds-sheet').open()\">\n            Open Bottom Sheet\n        </vds-button>\n    </div>\n    <vds-sheet\n        opened=\"${args.opened}\"\n        backdrop=\"${args.backdrop}\"\n        hide-drag-handle=\"${args.hideDragHandle}\"\n        height=\"${args.height}\"\n    >\n        <div class=\"sheet-content\">\n            <h2>Sheet Content</h2>\n            <p>This is the content of the sheet.</p>\n        </div>\n    </vds-sheet>\n</div>\n    `;\n};\n\nexport const BasicUsage = codeTemplate.bind({});\n\nBasicUsage.args = {\n  opened: false,\n  backdrop: true,\n  hideDragHandle: false,\n  height: 'auto',\n};\n\nconst richStyles = `\n  .trigger-container {\n    padding: 2rem;\n    display: flex;\n    justify-content: center;\n  }\n  .sheet-content {\n    padding: 1rem;\n  }\n  .content-section {\n    margin-bottom: 1.5rem;\n  }\n  .badges-container {\n    display: flex;\n    gap: 0.5rem;\n    margin: 1rem 0;\n  }\n  .actions-container {\n    display: flex;\n    gap: 1rem;\n    justify-content: flex-end;\n    margin-top: 2rem;\n  }\n`;\n\nconst richContentCodeTemplate = args => {\n  return `\n<style>${richStyles}</style>\n<div class=\"container\">\n    <div class=\"trigger-container\">\n        <vds-button \n            variant=\"primary\" \n            size=\"medium\" \n            onclick=\"document.querySelector('vds-sheet').open()\">\n            Open Profile Settings\n        </vds-button>\n    </div>\n    <vds-sheet\n        opened=\"${args.opened}\"\n        backdrop=\"${args.backdrop}\"\n        hide-drag-handle=\"${args.hideDragHandle}\"\n        height=\"${args.height}\"\n    >\n        <div class=\"sheet-content\">\n            <div class=\"content-section\">\n                <h2>User Profile Settings</h2>\n                <p>Manage your account preferences and notification settings.</p>\n            </div>\n            \n            <div class=\"content-section\">\n                <h3>Status Badges</h3>\n                <div class=\"badges-container\">\n                    <vds-badge-pill status-color=\"healthy\" value=\"Active\"></vds-badge-pill>\n                    <vds-badge-pill status-color=\"information\" value=\"Premium\"></vds-badge-pill>\n                    <vds-badge-pill status-color=\"warning\" value=\"Pending Review\"></vds-badge-pill>\n                </div>\n            </div>\n\n            <div class=\"content-section\">\n                <vds-field label=\"Notification Preferences\" size=\"medium\">\n                    <vds-basic-dropdown \n                        placeholder=\"Choose notification frequency\" \n                        value=\"Daily\"\n                        size=\"medium\"\n                        match-width=\"true\">\n                        <vds-dropdown-item value=\"Real-time\" label=\"Real-time\"></vds-dropdown-item>\n                        <vds-dropdown-item value=\"Hourly\" label=\"Hourly\"></vds-dropdown-item>\n                        <vds-dropdown-item value=\"Daily\" label=\"Daily\"></vds-dropdown-item>\n                        <vds-dropdown-item value=\"Weekly\" label=\"Weekly\"></vds-dropdown-item>\n                        <vds-dropdown-item value=\"Never\" label=\"Never\"></vds-dropdown-item>\n                    </vds-basic-dropdown>\n                </vds-field>\n            </div>\n\n            <div class=\"actions-container\">\n                <vds-button \n                    variant=\"secondary\" \n                    size=\"medium\"\n                    onclick=\"document.querySelector('vds-sheet').close()\">\n                    Cancel\n                </vds-button>\n                <vds-button variant=\"primary\" size=\"medium\">Save Changes</vds-button>\n            </div>\n        </div>\n    </vds-sheet>\n</div>\n    `;\n};\n\nexport const RichContent = richContentCodeTemplate.bind({});\n\nRichContent.args = {\n  opened: false,\n  backdrop: true,\n  hideDragHandle: false,\n  height: '70%',\n};\n\nconst customStyles = `\n  .trigger-container {\n    padding: 2rem;\n    display: flex;\n    justify-content: center;\n  }\n  .sheet-content {\n    padding: 1.5rem;\n    text-align: center;\n  }\n  .theme-demo {\n    margin-bottom: 1rem;\n  }\n  .color-swatches {\n    display: flex;\n    gap: 1rem;\n    justify-content: center;\n    margin: 1rem 0;\n  }\n  .swatch {\n    width: 40px;\n    height: 40px;\n    border-radius: 8px;\n    border: 2px solid var(--color-border-low);\n  }\n  .swatch.bg { background-color: var(--vds-sheet-background-color, #f8f9fa); }\n  .swatch.handle { background-color: var(--vds-sheet-drag-handle-color, #6c757d); }\n  .swatch.shadow { \n    background: linear-gradient(135deg, rgba(0,0,0,0.1), rgba(0,0,0,0.3));\n    box-shadow: var(--vds-sheet-box-shadow, 0 2px 8px rgba(0,0,0,0.1));\n  }\n`;\n\nconst customUsageCodeTemplate = args => {\n  return `\n<style>${customStyles}</style>\n<div class=\"container\">\n    <div class=\"trigger-container\">\n        <vds-button \n            variant=\"primary\" \n            size=\"medium\" \n            onclick=\"document.querySelector('vds-sheet').open()\">\n            Open VDS Green Theme Sheet\n        </vds-button>\n    </div>\n    <vds-sheet\n        opened=\"${args.opened}\"\n        backdrop=\"${args.backdrop}\"\n        hide-drag-handle=\"${args.hideDragHandle}\"\n        height=\"${args.height}\"\n        style=\"\n            --vds-sheet-background-color: var(--color-background-healthy-lowest-default);\n            --vds-sheet-backdrop-color: var(--color-background-healthy-lowest-hover);\n            --vds-sheet-box-shadow: var(--elevation-shadow-5);\n            --vds-sheet-border-radius: 100px;\n            --vds-sheet-drag-handle-color: var(--color-icon-healthy);\n            --vds-sheet-transition-duration: 0.4s;\n        \"\n    >\n        <div class=\"sheet-content\">\n            <div class=\"theme-demo\">\n                <h2 style=\"color: var(--color-text-healthy-high); margin-bottom: 0.5rem;\">VDS Green Theme Demo</h2>\n                <p style=\"color: var(--color-text-healthy-medium);\">This sheet demonstrates a green color scheme using VDS healthy color tokens from the design system.</p>\n            </div>\n            \n            <div class=\"theme-demo\">\n                <h3 style=\"color: var(--color-text-healthy-high); font-size: 1rem; margin-bottom: 1rem;\">VDS Healthy Colors</h3>\n                <div class=\"color-swatches\">\n                    <div class=\"swatch bg\" title=\"Background (--color-background-healthy-lowest-default)\"></div>\n                    <div class=\"swatch handle\" title=\"Drag Handle (--color-icon-healthy)\"></div>\n                    <div class=\"swatch shadow\" title=\"Elevation Shadow (--elevation-shadow-5)\"></div>\n                </div>\n                <p style=\"color: var(--color-text-high); font-size: 0.875rem;\">Background • Handle • Shadow</p>\n            </div>\n\n            <div class=\"theme-demo\">\n                <vds-field label=\"Theme Settings\" size=\"medium\">\n                    <vds-basic-dropdown \n                        placeholder=\"Choose theme variant\" \n                        value=\"Green\"\n                        size=\"medium\"\n                        match-width=\"true\">\n                        <vds-dropdown-item value=\"Light\" label=\"Light Theme\"></vds-dropdown-item>\n                        <vds-dropdown-item value=\"Green\" label=\"VDS Green Theme\"></vds-dropdown-item>\n                        <vds-dropdown-item value=\"Dark\" label=\"Dark Theme\"></vds-dropdown-item>\n                        <vds-dropdown-item value=\"Auto\" label=\"Auto Theme\"></vds-dropdown-item>\n                    </vds-basic-dropdown>\n                </vds-field>\n            </div>\n\n            <div style=\"margin-top: 2rem; display: flex; gap: 1rem; justify-content: center;\">\n                <vds-button \n                    variant=\"secondary\" \n                    size=\"medium\"\n                    onclick=\"document.querySelector('vds-sheet').close()\">\n                    Close\n                </vds-button>\n                <vds-button variant=\"primary\" size=\"medium\">Apply Theme</vds-button>\n            </div>\n        </div>\n    </vds-sheet>\n</div>\n    `;\n};\n\nexport const CustomUsage = customUsageCodeTemplate.bind({});\n\nCustomUsage.args = {\n  opened: false,\n  backdrop: true,\n  hideDragHandle: false,\n  height: '60%',\n};\n"]}