@diwacopilot/components 1.0.0

package/dist/cjs/diwa-flyout.cjs.entry.js

@@ -0,0 +1,203 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-d665fd57.js');
+const styles = require('./styles-6342300d.js');
+
+/**
+ * diwa-flyout-styles.ts
+ * ======================
+ * CSS-in-JS styles for <diwa-flyout>.
+ *
+ * The flyout is a fixed-position overlay consisting of:
+ *   - A semi-transparent backdrop that covers the viewport.
+ *   - A panel that slides in from the start (left) or end (right) edge.
+ *
+ * Both the backdrop and panel animate on open/close. Because all values are
+ * passed as template literal expressions, the <style> tag is re-emitted on
+ * every render — which happens whenever `open` or `position` changes.
+ *
+ * Visibility technique: `:host` uses `visibility: hidden` with a delayed
+ * transition when closing so the panel is invisible after the slide-out
+ * animation completes, while still being `visibility: visible` during the
+ * opening animation so it animates in correctly.
+ */
+const getComponentCss = (open, position, backdrop) => `
+
+  /* ── Host ──────────────────────────────────────────────────────────── */
+
+  :host {
+    display: block;
+    position: fixed;
+    inset: 0;
+    z-index: var(--diwa-z-overlay);
+    pointer-events: ${open ? 'auto' : 'none'};
+    visibility: ${open ? 'visible' : 'hidden'};
+    transition: visibility 0s linear ${open ? '0s' : 'var(--diwa-motion-duration-moderate)'};
+  }
+
+  :host([hidden]) {
+    display: none;
+  }
+
+  /* ── Backdrop ──────────────────────────────────────────────────────── */
+
+  .backdrop {
+    position: absolute;
+    inset: 0;
+    ${backdrop === 'blur'
+    ? `
+    background: var(--diwa-bg-frosted);
+    backdrop-filter: blur(var(--diwa-blur-lg));
+    -webkit-backdrop-filter: blur(var(--diwa-blur-lg));`
+    : `
+    background: var(--diwa-bg-shading);`}
+    opacity: ${open ? '1' : '0'};
+    transition: opacity var(--diwa-motion-duration-moderate) var(--diwa-motion-easing-out);
+    cursor: pointer;
+  }
+
+  /* ── Panel ─────────────────────────────────────────────────────────── */
+
+  .panel {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    ${position === 'start' ? 'left: 0;' : 'right: 0;'}
+    width: var(--diwa-flyout-width, 480px);
+    min-width: var(--diwa-flyout-min-width);
+    max-width: 100vw;
+    display: flex;
+    flex-direction: column;
+    background: var(--diwa-bg-surface);
+    border-${position === 'start' ? 'right' : 'left'}: var(--diwa-border-width-thin) solid var(--diwa-border);
+    transform: translateX(${open ? '0' : position === 'start' ? '-100%' : '100%'});
+    transition: transform var(--diwa-motion-duration-moderate) var(--diwa-motion-easing-base);
+    overflow: hidden;
+    outline: none;
+  }
+
+  /* ── Header ────────────────────────────────────────────────────────── */
+
+  .header {
+    display: flex;
+    align-items: center;
+    gap: var(--diwa-space-3);
+    padding: var(--diwa-space-5) var(--diwa-space-6);
+    border-bottom: var(--diwa-border-width-thin) solid var(--diwa-border);
+  }
+
+  .heading-text {
+    flex: 1;
+    min-width: 0;
+    font-family: var(--diwa-font-family-base);
+    font-size: var(--diwa-font-size-xl);
+    font-weight: var(--diwa-font-weight-semibold);
+    color: var(--diwa-text-primary);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  /* ── Scrollable content ────────────────────────────────────────────── */
+
+  .content {
+    flex: 1;
+    overflow-y: auto;
+    padding: var(--diwa-space-6);
+    overscroll-behavior: contain;
+  }
+
+  /* ── Sticky footer ─────────────────────────────────────────────────── */
+
+  .footer {
+    flex-shrink: 0;
+    padding: var(--diwa-space-4) var(--diwa-space-6);
+    border-top: var(--diwa-border-width-thin) solid var(--diwa-border); {
+    display: none;
+  }
+
+  ${styles.getReducedMotionStyle('.panel', '.backdrop')}
+`;
+
+const DiwaFlyout = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.dismiss = index.createEvent(this, "dismiss", 1);
+        this.savedFocusEl = null;
+        // ──────────────────────────────────────────────────────────────
+        // Props
+        // ──────────────────────────────────────────────────────────────
+        /** Per-component theme override (`light` / `dark`). */
+        this.theme = 'dark';
+        /**
+         * Whether the flyout is currently open.
+         *
+         * Controlled prop — the consumer must set this to `false` in response to
+         * the `dismiss` event (backdrop click, Escape key, or dismiss button).
+         */
+        this.open = false;
+        /** Which edge of the viewport the panel slides in from (`start` = left, `end` = right). */
+        this.position = 'end';
+        /**
+         * Controls the visual style of the backdrop overlay.
+         * `blur`    — frosted glass (default; use when opened by user interaction).
+         * `shading` — solid dark scrim (use for system-triggered flyouts).
+         */
+        this.backdrop = 'blur';
+        /** Heading text displayed in the flyout header. */
+        this.heading = '';
+        // ──────────────────────────────────────────────────────────────
+        // Private helpers
+        // ──────────────────────────────────────────────────────────────
+        this.handleDismiss = () => {
+            this.dismiss.emit();
+        };
+    }
+    // ──────────────────────────────────────────────────────────────
+    // Lifecycle
+    // ──────────────────────────────────────────────────────────────
+    onOpenChange(nextOpen) {
+        var _a;
+        if (nextOpen) {
+            document.body.style.overflow = 'hidden';
+            this.savedFocusEl = document.activeElement;
+            requestAnimationFrame(() => {
+                var _a;
+                (_a = this.panelEl) === null || _a === void 0 ? void 0 : _a.focus();
+            });
+        }
+        else {
+            document.body.style.overflow = '';
+            (_a = this.savedFocusEl) === null || _a === void 0 ? void 0 : _a.focus();
+            this.savedFocusEl = null;
+        }
+    }
+    disconnectedCallback() {
+        document.body.style.overflow = '';
+    }
+    // ──────────────────────────────────────────────────────────────
+    // Keyboard handling
+    // ──────────────────────────────────────────────────────────────
+    /** Close on Escape key while the flyout is open. */
+    onKeyDown(e) {
+        if (this.open && e.key === 'Escape') {
+            e.preventDefault();
+            this.dismiss.emit();
+        }
+    }
+    // ──────────────────────────────────────────────────────────────
+    // Render
+    // ──────────────────────────────────────────────────────────────
+    render() {
+        return (index.h(index.Host, { key: '52d5fe7be0dfea4a62bc7a4a7637b2f9edbe141d', "data-theme": this.theme }, index.h("style", { key: '024c161908d6c2954d8f6a3a07b24f07c2d8e43c' }, getComponentCss(this.open, this.position, this.backdrop)), index.h("div", { key: 'f76c3d2f71725d8d2b3d29a2cbbacc5b2c9da3d2', class: "backdrop", "aria-hidden": "true", onClick: this.handleDismiss }), index.h("div", { key: '6365781507ae83c8bc9d4f5233f9cdf464d8e9ca', class: "panel", role: "dialog", "aria-modal": "true", "aria-label": this.heading || 'Flyout', tabIndex: -1, ref: (el) => { this.panelEl = el; } }, index.h("div", { key: 'b8dbb339620ebc2fab8dde5ee70fd5eaca614464', class: "header" }, index.h("span", { key: 'e7de07e86b1ca0ca6072f47ab6da4b4eb5b4a7d3', class: "heading-text" }, this.heading), index.h("slot", { key: 'b688288e6f4a4fd910845eb2c14a6ba705e81eee', name: "header" }), index.h("diwa-button-pure", { key: '8924888f63033a7c285f63b589834ef4e301aa74', icon: "x", label: "Close flyout", size: "sm", hideLabel: true, onClick: this.handleDismiss })), index.h("div", { key: '1bf9756c8d8cb88f58e1b960c3d5ee22500828ba', class: "content" }, index.h("slot", { key: '292d34bfc03446b3f751f39df50c3655bd46a0e6' })), index.h("div", { key: '51270f6fed520df8a4101027a1f9023118b9f46e', class: "footer" }, index.h("slot", { key: 'f6684ace2a9f0ec82d5b1face5de06bede92c84b', name: "footer" })))));
+    }
+    static get watchers() { return {
+        "open": ["onOpenChange"]
+    }; }
+};
+
+exports.diwa_flyout = DiwaFlyout;
+
+//# sourceMappingURL=diwa-flyout.cjs.entry.js.map

package/dist/cjs/diwa-flyout.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"diwa-flyout.entry.cjs.js","mappings":"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","names":["getReducedMotionStyle","h","Host"],"sources":["src/components/diwa-flyout/diwa-flyout-styles.ts","src/components/diwa-flyout/diwa-flyout.tsx"],"sourcesContent":["/**\r\n * diwa-flyout-styles.ts\r\n * ======================\r\n * CSS-in-JS styles for <diwa-flyout>.\r\n *\r\n * The flyout is a fixed-position overlay consisting of:\r\n *   - A semi-transparent backdrop that covers the viewport.\r\n *   - A panel that slides in from the start (left) or end (right) edge.\r\n *\r\n * Both the backdrop and panel animate on open/close. Because all values are\r\n * passed as template literal expressions, the <style> tag is re-emitted on\r\n * every render — which happens whenever `open` or `position` changes.\r\n *\r\n * Visibility technique: `:host` uses `visibility: hidden` with a delayed\r\n * transition when closing so the panel is invisible after the slide-out\r\n * animation completes, while still being `visibility: visible` during the\r\n * opening animation so it animates in correctly.\r\n */\r\n\r\nimport { getReducedMotionStyle } from '../../utils/styles';\r\nimport type { FlyoutBackdrop, FlyoutPosition } from './types';\r\n\r\nexport const getComponentCss = (\r\n  open: boolean,\r\n  position: FlyoutPosition,\r\n  backdrop: FlyoutBackdrop,\r\n): string => `\r\n\r\n  /* ── Host ──────────────────────────────────────────────────────────── */\r\n\r\n  :host {\r\n    display: block;\r\n    position: fixed;\r\n    inset: 0;\r\n    z-index: var(--diwa-z-overlay);\r\n    pointer-events: ${open ? 'auto' : 'none'};\r\n    visibility: ${open ? 'visible' : 'hidden'};\r\n    transition: visibility 0s linear ${open ? '0s' : 'var(--diwa-motion-duration-moderate)'};\r\n  }\r\n\r\n  :host([hidden]) {\r\n    display: none;\r\n  }\r\n\r\n  /* ── Backdrop ──────────────────────────────────────────────────────── */\r\n\r\n  .backdrop {\r\n    position: absolute;\r\n    inset: 0;\r\n    ${\r\n      backdrop === 'blur'\r\n        ? `\r\n    background: var(--diwa-bg-frosted);\r\n    backdrop-filter: blur(var(--diwa-blur-lg));\r\n    -webkit-backdrop-filter: blur(var(--diwa-blur-lg));`\r\n        : `\r\n    background: var(--diwa-bg-shading);`\r\n    }\r\n    opacity: ${open ? '1' : '0'};\r\n    transition: opacity var(--diwa-motion-duration-moderate) var(--diwa-motion-easing-out);\r\n    cursor: pointer;\r\n  }\r\n\r\n  /* ── Panel ─────────────────────────────────────────────────────────── */\r\n\r\n  .panel {\r\n    position: absolute;\r\n    top: 0;\r\n    bottom: 0;\r\n    ${position === 'start' ? 'left: 0;' : 'right: 0;'}\r\n    width: var(--diwa-flyout-width, 480px);\r\n    min-width: var(--diwa-flyout-min-width);\r\n    max-width: 100vw;\r\n    display: flex;\r\n    flex-direction: column;\r\n    background: var(--diwa-bg-surface);\r\n    border-${position === 'start' ? 'right' : 'left'}: var(--diwa-border-width-thin) solid var(--diwa-border);\r\n    transform: translateX(${open ? '0' : position === 'start' ? '-100%' : '100%'});\r\n    transition: transform var(--diwa-motion-duration-moderate) var(--diwa-motion-easing-base);\r\n    overflow: hidden;\r\n    outline: none;\r\n  }\r\n\r\n  /* ── Header ────────────────────────────────────────────────────────── */\r\n\r\n  .header {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: var(--diwa-space-3);\r\n    padding: var(--diwa-space-5) var(--diwa-space-6);\r\n    border-bottom: var(--diwa-border-width-thin) solid var(--diwa-border);\r\n  }\r\n\r\n  .heading-text {\r\n    flex: 1;\r\n    min-width: 0;\r\n    font-family: var(--diwa-font-family-base);\r\n    font-size: var(--diwa-font-size-xl);\r\n    font-weight: var(--diwa-font-weight-semibold);\r\n    color: var(--diwa-text-primary);\r\n    white-space: nowrap;\r\n    overflow: hidden;\r\n    text-overflow: ellipsis;\r\n  }\r\n\r\n  /* ── Scrollable content ────────────────────────────────────────────── */\r\n\r\n  .content {\r\n    flex: 1;\r\n    overflow-y: auto;\r\n    padding: var(--diwa-space-6);\r\n    overscroll-behavior: contain;\r\n  }\r\n\r\n  /* ── Sticky footer ─────────────────────────────────────────────────── */\r\n\r\n  .footer {\r\n    flex-shrink: 0;\r\n    padding: var(--diwa-space-4) var(--diwa-space-6);\r\n    border-top: var(--diwa-border-width-thin) solid var(--diwa-border); {\r\n    display: none;\r\n  }\r\n\r\n  ${getReducedMotionStyle('.panel', '.backdrop')}\r\n`;\r\n","import {\r\n  Component,\r\n  Event,\r\n  type EventEmitter,\r\n  Host,\r\n  Listen,\r\n  Prop,\r\n  Watch,\r\n  h,\r\n} from '@stencil/core';\r\nimport type { FlyoutBackdrop, FlyoutPosition } from './types';\r\nimport type { Theme } from '../../utils/styles';\r\nimport { getComponentCss } from './diwa-flyout-styles';\r\n\r\n/**\r\n * @component diwa-flyout\r\n *\r\n * A full-height overlay panel that slides in from the start or end edge of\r\n * the viewport. Follows the controlled component pattern — the consumer\r\n * manages `open` state in response to the `dismiss` event.\r\n *\r\n * Accessibility:\r\n *   - Panel has `role=\"dialog\"` and `aria-modal=\"true\"`\r\n *   - Clicking the backdrop, pressing Escape, or clicking the dismiss button\r\n *     emits the `dismiss` event; the consumer sets `open={false}`\r\n *   - Focus moves to the panel when opened and returns to the trigger element\r\n *     when closed\r\n *   - Body scroll is locked (`overflow: hidden`) while the flyout is open\r\n *\r\n * V1 limitations:\r\n *   - No focus trap: Tab can navigate outside the panel. A full focus trap\r\n *     will be added in V2.\r\n *\r\n * Usage:\r\n *   <diwa-flyout heading=\"Settings\" open={isOpen} onDismiss={() => setIsOpen(false)}>\r\n *     <p>Flyout body content.</p>\r\n *     <div slot=\"footer\">\r\n *       <diwa-button onClick={() => setIsOpen(false)}>Save</diwa-button>\r\n *     </div>\r\n *   </diwa-flyout>\r\n *\r\n * @slot default — Scrollable body content of the flyout.\r\n * @slot header  — Extra content in the header row, inserted after the heading text.\r\n * @slot footer  — Sticky footer content (e.g. action buttons). Auto-hides when empty.\r\n */\r\n@Component({\r\n  tag: 'diwa-flyout',\r\n  shadow: true,\r\n})\r\nexport class DiwaFlyout {\r\n  private panelEl?: HTMLDivElement;\r\n  private savedFocusEl: HTMLElement | null = null;\r\n\r\n  // ──────────────────────────────────────────────────────────────\r\n  // Props\r\n  // ──────────────────────────────────────────────────────────────\r\n\r\n  /** Per-component theme override (`light` / `dark`). */\r\n  @Prop({ reflect: true }) theme: Theme = 'dark';\r\n\r\n  /**\r\n   * Whether the flyout is currently open.\r\n   *\r\n   * Controlled prop — the consumer must set this to `false` in response to\r\n   * the `dismiss` event (backdrop click, Escape key, or dismiss button).\r\n   */\r\n  @Prop({ reflect: true, mutable: true }) open: boolean = false;\r\n\r\n  /** Which edge of the viewport the panel slides in from (`start` = left, `end` = right). */\r\n  @Prop({ reflect: true }) position: FlyoutPosition = 'end';\r\n\r\n  /**\r\n   * Controls the visual style of the backdrop overlay.\r\n   * `blur`    — frosted glass (default; use when opened by user interaction).\r\n   * `shading` — solid dark scrim (use for system-triggered flyouts).\r\n   */\r\n  @Prop() backdrop: FlyoutBackdrop = 'blur';\r\n\r\n  /** Heading text displayed in the flyout header. */\r\n  @Prop() heading: string = '';\r\n\r\n  // ──────────────────────────────────────────────────────────────\r\n  // Events\r\n  // ──────────────────────────────────────────────────────────────\r\n\r\n  /**\r\n   * Emitted when the user requests the flyout to close (backdrop click,\r\n   * Escape key press, or dismiss button click).\r\n   *\r\n   * The consumer must set `open={false}` in response:\r\n   * ```html\r\n   * <diwa-flyout onDismiss={() => this.open = false} />\r\n   * ```\r\n   * Not bubbles, not composed.\r\n   */\r\n  @Event({ bubbles: false, composed: false })\r\n  dismiss!: EventEmitter<void>;\r\n\r\n  // ──────────────────────────────────────────────────────────────\r\n  // Lifecycle\r\n  // ──────────────────────────────────────────────────────────────\r\n\r\n  @Watch('open')\r\n  onOpenChange(nextOpen: boolean): void {\r\n    if (nextOpen) {\r\n      document.body.style.overflow = 'hidden';\r\n      this.savedFocusEl = document.activeElement as HTMLElement;\r\n      requestAnimationFrame(() => {\r\n        this.panelEl?.focus();\r\n      });\r\n    } else {\r\n      document.body.style.overflow = '';\r\n      this.savedFocusEl?.focus();\r\n      this.savedFocusEl = null;\r\n    }\r\n  }\r\n\r\n  disconnectedCallback(): void {\r\n    document.body.style.overflow = '';\r\n  }\r\n\r\n  // ──────────────────────────────────────────────────────────────\r\n  // Keyboard handling\r\n  // ──────────────────────────────────────────────────────────────\r\n\r\n  /** Close on Escape key while the flyout is open. */\r\n  @Listen('keydown', { target: 'window' })\r\n  onKeyDown(e: KeyboardEvent): void {\r\n    if (this.open && e.key === 'Escape') {\r\n      e.preventDefault();\r\n      this.dismiss.emit();\r\n    }\r\n  }\r\n\r\n  // ──────────────────────────────────────────────────────────────\r\n  // Private helpers\r\n  // ──────────────────────────────────────────────────────────────\r\n\r\n  private handleDismiss = (): void => {\r\n    this.dismiss.emit();\r\n  };\r\n\r\n  // ──────────────────────────────────────────────────────────────\r\n  // Render\r\n  // ──────────────────────────────────────────────────────────────\r\n\r\n  render() {\r\n    return (\r\n      <Host data-theme={this.theme}>\r\n        <style>{getComponentCss(this.open, this.position, this.backdrop)}</style>\r\n\r\n        {/* Backdrop — clicking it emits dismiss */}\r\n        <div\r\n          class=\"backdrop\"\r\n          aria-hidden=\"true\"\r\n          onClick={this.handleDismiss}\r\n        />\r\n\r\n        {/* Dialog panel */}\r\n        <div\r\n          class=\"panel\"\r\n          role=\"dialog\"\r\n          aria-modal=\"true\"\r\n          aria-label={this.heading || 'Flyout'}\r\n          tabIndex={-1}\r\n          ref={(el) => { this.panelEl = el as HTMLDivElement; }}\r\n        >\r\n          <div class=\"header\">\r\n            <span class=\"heading-text\">{this.heading}</span>\r\n            <slot name=\"header\" />\r\n            <diwa-button-pure\r\n              icon=\"x\"\r\n              label=\"Close flyout\"\r\n              size=\"sm\"\r\n              hideLabel={true}\r\n              onClick={this.handleDismiss}\r\n            />\r\n          </div>\r\n\r\n          <div class=\"content\">\r\n            <slot />\r\n          </div>\r\n\r\n          <div class=\"footer\">\r\n            <slot name=\"footer\" />\r\n          </div>\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}