@brightspot/ui 1.4.1 → 1.6.0

package/dist/components/widget/Widget.css

@@ -0,0 +1,104 @@
+/* FOUC prevention: hide pseudo-slotted content before component upgrades */
+btu-widget:not(:defined) > [slot] {
+  @apply hidden;
+}
+
+btu-widget:not(:defined) {
+  @apply pointer-events-none block opacity-50;
+}
+
+/* Collapse/expand transition: grid-template-rows technique */
+.btu-widget__collapsible {
+  @apply grid grid-rows-[1fr] opacity-100;
+  transition:
+    grid-template-rows 200ms ease,
+    opacity 150ms ease;
+}
+
+btu-widget:state(collapsed) .btu-widget__collapsible {
+  @apply grid-rows-[0fr] opacity-0;
+}
+
+btu-widget:state(collapsed) .btu-widget__header {
+  @apply border-b-transparent;
+}
+
+.btu-widget__collapse-chevron {
+  transition: transform 200ms;
+}
+
+btu-widget:state(collapsed) .btu-widget__collapse-chevron {
+  transform: rotate(-180deg);
+}
+
+.btu-widget__collapsible-inner {
+  @apply min-h-0 overflow-hidden;
+}
+
+/* View Transition: Widget fullscreen animation
+   Easing: open-props --ease-spring-3
+   See: https://open-props.style/#easing */
+html::view-transition-group(widget) {
+  animation-duration: 600ms;
+  animation-timing-function: linear(
+    0,
+    0.009,
+    0.035 2.1%,
+    0.141 4.4%,
+    0.723 12.9%,
+    0.938 16.7%,
+    1.017,
+    1.077,
+    1.121,
+    1.149 24.3%,
+    1.159,
+    1.163,
+    1.161,
+    1.154 29.9%,
+    1.129 32.8%,
+    1.051 39.6%,
+    1.017 43.1%,
+    0.991,
+    0.977 51%,
+    0.974 53.8%,
+    0.975 57.1%,
+    0.997 69.8%,
+    1.003 76.9%,
+    1
+  );
+}
+
+html::view-transition-old(widget) {
+  @apply opacity-0;
+}
+
+html::view-transition-new(widget) {
+  @apply animate-widget-maximize-fade-in;
+}
+
+/* Native dialog backdrop styling */
+.btu-widget__dialog::backdrop {
+  @apply backdrop-blur transition-all duration-300 ease-out [background-color:theme(backdropColor.dialog)];
+}
+
+/* Backdrop entry animation */
+@starting-style {
+  .btu-widget__dialog[open]::backdrop {
+    @apply opacity-0 [backdrop-filter:blur(0px)];
+  }
+}
+
+/* Reduced motion: disable view transition spring easing and backdrop transitions */
+@media (prefers-reduced-motion: reduce) {
+  html::view-transition-group(widget) {
+    animation-duration: 0.01ms;
+  }
+
+  .btu-widget__collapsible {
+    @apply transition-none;
+  }
+
+  .btu-widget__dialog::backdrop {
+    @apply transition-none;
+  }
+}

package/dist/components/widget/Widget.d.ts

@@ -0,0 +1,170 @@
+import { LitElement, type PropertyValues } from 'lit';
+import '../icon/Icon.js';
+import './Widget.css';
+export interface WidgetProps {
+    heading?: string;
+    collapsible?: boolean;
+    collapsed?: boolean;
+    fullscreenable?: boolean;
+}
+declare const Widget_base: (new (...args: any[]) => import("../../util/EventEmitterMixin.js").EventEmitterMixinInterface) & (new (...args: any[]) => import("../../util/ReadyMixin.js").ReadyMixinInterface) & typeof LitElement;
+/**
+ * A widget component for displaying content with header, body, and footer sections.
+ *
+ * ## Architecture: Light DOM + Manager Pattern
+ *
+ * This component uses **Light DOM** (no Shadow Root) with the **Manager Pattern**:
+ * - User-provided children are physically moved into internal containers
+ * - Movement is based on `slot` attributes (pseudo-slots)
+ * - The `onFind` utility automatically redistributes dynamically-added content
+ *
+ * ### Node Redistribution Rules
+ * - `slot="controls"` → Moved to header actions area (before system buttons)
+ * - `slot="footer"` → Moved to footer container
+ * - *(no slot)* → Moved to body container (default)
+ *
+ * ## Features
+ *
+ * - **Collapsible**: Optional chevron toggle to hide/show body and footer
+ * - **Fullscreen**: Optional maximize button for fullscreen mode via `:state(fullscreen)` custom state
+ * - **Dynamic Content**: `onFind` handles content added after initialization
+ * - **Accessible**: Full ARIA support and keyboard navigation
+ * - **Themeable**: CSS custom properties for colors and spacing
+ *
+ * ## Accessibility
+ *
+ * - **Collapse toggle**: `aria-expanded`, `aria-controls`, `aria-label`
+ * - **Fullscreen toggle**: `aria-pressed`, `aria-label`
+ * - **Body region**: `role="region"`, `aria-labelledby` linking to heading
+ * - **Tab order**: Natural flow via physical DOM placement
+ * - **Collapsed content**: Hidden via `inert` attribute and CSS grid collapse
+ *
+ * @element btu-widget
+ *
+ * @attr heading - Title text displayed in the header
+ * @attr collapsible - Whether the widget can be collapsed/expanded
+ * @attr collapsed - Whether the widget is currently collapsed (implies collapsible)
+ * @attr fullscreenable - Whether the widget can enter fullscreen mode
+ * @attr id - When set, collapsed state is automatically persisted to LocalStorage
+ *
+ * @fires {CustomEvent} btu-widget-ready - Fired after first render and redistribution
+ * @fires {CustomEvent<{collapsed: boolean}>} btu-widget-collapse-changed - Fired when collapsed state changes
+ * @fires {CustomEvent<{fullscreen: boolean}>} btu-widget-fullscreen-changed - Fired when fullscreen state changes
+ *
+ * @cssprop --widget-background - Body and footer background color (default: --btu-theme-white)
+ * @cssprop --widget-border - Widget border and dividers (default: 1px solid gray-200)
+ * @cssprop --header-background - Header background color (default: transparent)
+ *
+ * @cssstate collapsed - Applied when the widget is collapsed, targetable via :state(collapsed)
+ * @cssstate fullscreen - Applied when the widget is in fullscreen mode, targetable via :state(fullscreen)
+ *
+ * @slot - Default pseudo-slot: elements without slot attribute are moved to body
+ * @slot controls - Pseudo-slot: buttons/actions moved to header actions area
+ * @slot footer - Pseudo-slot: content moved to footer container
+ *
+ * @example
+ * ```html
+ * <!-- Basic usage with heading property -->
+ * <btu-widget heading="My Widget">
+ *   <button slot="controls">Action</button>
+ *   <div>Main body content</div>
+ * </btu-widget>
+ * ```
+ */
+export default class Widget extends Widget_base {
+    private static _idCounter;
+    private _internals;
+    protected createRenderRoot(): HTMLElement | DocumentFragment;
+    /**
+     * Heading text displayed in the header.
+     * @attr
+     */
+    heading: string;
+    /**
+     * Whether the widget can be collapsed/expanded.
+     * When true, a chevron toggle button appears in the header.
+     * @attr
+     */
+    collapsible: boolean;
+    /**
+     * Whether the widget is currently collapsed.
+     * When true, body and footer are hidden. Implies collapsible.
+     * @attr
+     */
+    collapsed: boolean;
+    /**
+     * Whether the widget can enter fullscreen mode.
+     * When true, a fullscreen toggle button appears in the header.
+     * @attr
+     */
+    fullscreenable: boolean;
+    private _isFullscreen;
+    private _collapseTooltip;
+    private _fullscreenTooltip;
+    /**
+     * Whether the widget is currently in fullscreen mode (read-only).
+     * Use `btu-widget-fullscreen-changed` event to react to changes.
+     */
+    get isFullscreen(): boolean;
+    /** @internal */
+    private _instanceId;
+    /** @internal */
+    private bodyId;
+    /** @internal */
+    private dialogId;
+    /** @internal */
+    private _dialog?;
+    /** @internal */
+    private _dialogCloseHandler?;
+    /** @internal - Light-dismiss handler bound to this instance */
+    private _lightDismissHandler?;
+    willUpdate(changed: PropertyValues): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    firstUpdated(): void;
+    /**
+     * Toggles the collapsed state of the widget.
+     * Emits 'btu-widget-collapse-changed' event with collapsed state.
+     * @internal
+     */
+    private handleToggle;
+    /**
+     * Toggles the fullscreen state of the widget using native dialog element.
+     * Moves the content wrapper into the dialog on fullscreen, back out on exit.
+     * Uses dialog.showModal() for proper modal behavior with backdrop.
+     * Uses View Transition API for smooth fullscreen animation.
+     * Emits 'btu-widget-fullscreen-changed' event with fullscreen state.
+     * @internal
+     */
+    private handleFullscreen;
+    /**
+     * Sets up the dialog element and event listeners.
+     * @internal
+     */
+    private _setupDialog;
+    /**
+     * Restores widget state from LocalStorage if id is set.
+     * Only restores if no explicit collapsed attribute is present on the element.
+     *
+     * Attribute Precedence:
+     * - If collapsed attribute is explicitly present in HTML: Use that value (ignore LocalStorage)
+     * - If collapsed attribute is absent: Restore from LocalStorage
+     *
+     * @internal
+     */
+    private _restoreState;
+    /**
+     * Persists widget state to LocalStorage if id is set.
+     *
+     * @internal
+     */
+    private _persistState;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'btu-widget': Widget;
+    }
+}
+export {};
+//# sourceMappingURL=Widget.d.ts.map

package/dist/components/widget/Widget.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Widget.d.ts","sourceRoot":"","sources":["../../../src/components/widget/Widget.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,KAAK,cAAc,EAAE,MAAM,KAAK,CAAA;AAO3D,OAAO,iBAAiB,CAAA;AACxB,OAAO,cAAc,CAAA;AAErB,MAAM,WAAW,WAAW;IAC1B,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,cAAc,CAAC,EAAE,OAAO,CAAA;CACzB;;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8DG;AACH,MAAM,CAAC,OAAO,OAAO,MAAO,SAAQ,WAAyC;IAC3E,OAAO,CAAC,MAAM,CAAC,UAAU,CAAI;IAE7B,OAAO,CAAC,UAAU,CAAyB;IAE3C,SAAS,CAAC,gBAAgB,IAAI,WAAW,GAAG,gBAAgB;IAI5D;;;OAGG;IAEH,OAAO,SAAK;IAEZ;;;;OAIG;IAEH,WAAW,UAAQ;IAEnB;;;;OAIG;IAEH,SAAS,UAAQ;IAEjB;;;;OAIG;IAEH,cAAc,UAAQ;IAGtB,OAAO,CAAC,aAAa,CAAQ;IAE7B,OAAO,CAAC,gBAAgB,CAMtB;IAEF,OAAO,CAAC,kBAAkB,CAMxB;IAEF;;;OAGG;IACH,IAAI,YAAY,IAAI,OAAO,CAE1B;IAED,gBAAgB;IAChB,OAAO,CAAC,WAAW,CAAsB;IAEzC,gBAAgB;IAChB,OAAO,CAAC,MAAM,CAAoC;IAElD,gBAAgB;IAChB,OAAO,CAAC,QAAQ,CAAsC;IAEtD,gBAAgB;IAChB,OAAO,CAAC,OAAO,CAAC,CAAmB;IAEnC,gBAAgB;IAChB,OAAO,CAAC,mBAAmB,CAAC,CAAY;IAExC,+DAA+D;IAC/D,OAAO,CAAC,oBAAoB,CAAC,CAAyB;IAEtD,UAAU,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI;IAWzC,iBAAiB,IAAI,IAAI;IAkBzB,oBAAoB,IAAI,IAAI;IAgB5B,YAAY,IAAI,IAAI;IAwBpB;;;;OAIG;IACH,OAAO,CAAC,YAAY;IAOpB;;;;;;;OAOG;IACH,OAAO,CAAC,gBAAgB;IAiDxB;;;OAGG;IACH,OAAO,CAAC,YAAY;IAgCpB;;;;;;;;;OASG;IACH,OAAO,CAAC,aAAa;IAwBrB;;;;OAIG;IACH,OAAO,CAAC,aAAa;IAerB,MAAM;CA6EP;AAQD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,MAAM,CAAA;KACrB;CACF"}