@fusion.dev/helix 0.100.0 → 0.102.0

package/dist/dialog/root/dialog-root.d.ts

@@ -12,7 +12,7 @@ import type { CSSResultGroup } from 'lit';
  * @since 0.1.0
  * @status stable
  * @category overlays
- * @aliases Modal, Lightbox, Sheet
+ * @aliases Modal, Sheet
  * @documentation https://fusion.dev/helix/components/dialog
  *
  * @cssproperty --dialog-border-color - Color of the panel's edge.

package/dist/element-events.generated.js

@@ -76,7 +76,16 @@ registerElementEvents({
     'helix-image': ['error', 'load'],
     'helix-input': ['change', 'helix-before-change', 'input'],
     'helix-kbd': ['helix-shortcut'],
+    'helix-lightbox': [
+        'close',
+        'helix-activate',
+        'helix-before-activate',
+        'helix-before-close',
+        'helix-before-open',
+        'toggle',
+    ],
     'helix-listbox': ['change', 'helix-before-change', 'helix-filter', 'input'],
+    'helix-map': ['helix-map-pan', 'helix-map-zoom'],
     'helix-megamenu': ['helix-before-close', 'helix-before-open', 'toggle'],
     'helix-menu': ['helix-before-close', 'helix-before-open', 'helix-select', 'toggle'],
     'helix-menu-item': ['helix-select'],

package/dist/index.d.ts

@@ -52,10 +52,12 @@ export * from './image/index.js';
 export * from './input/index.js';
 export * from './kbd/index.js';
 export * from './legend/index.js';
+export * from './lightbox/index.js';
 export * from './line-chart/index.js';
 export * from './list/index.js';
 export * from './listbox/index.js';
 export * from './loader/index.js';
+export * from './map/index.js';
 export * from './megamenu/index.js';
 export * from './menu/index.js';
 export * from './meter/index.js';

package/dist/index.js

@@ -47,10 +47,12 @@ export * from './image/index.js';
 export * from './input/index.js';
 export * from './kbd/index.js';
 export * from './legend/index.js';
+export * from './lightbox/index.js';
 export * from './line-chart/index.js';
 export * from './list/index.js';
 export * from './listbox/index.js';
 export * from './loader/index.js';
+export * from './map/index.js';
 export * from './megamenu/index.js';
 export * from './menu/index.js';
 export * from './meter/index.js';

package/dist/lightbox/index.d.ts

@@ -0,0 +1,2 @@
+export { HelixLightboxItem } from './item/lightbox-item.js';
+export { HelixLightbox } from './root/lightbox-root.js';

package/dist/lightbox/index.js

@@ -0,0 +1,2 @@
+export { HelixLightboxItem } from './item/lightbox-item.js';
+export { HelixLightbox } from './root/lightbox-root.js';

package/dist/lightbox/item/lightbox-item.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/dist/lightbox/item/lightbox-item.css.js

@@ -0,0 +1,34 @@
+import { createSheet } from '@fusion.dev/helix-core';
+export const styles = createSheet(`:host {
+display: contents;
+}
+
+[part="item"] {
+align-items: center;
+block-size: 100%;
+display: flex;
+flex-direction: column;
+gap: var(--lightbox-item-gap, var(--helix-space-sm));
+inline-size: 100%;
+justify-content: center;
+
+min-block-size: 0;
+min-inline-size: 0;
+}
+
+[part="item"][hidden] {
+display: none;
+}
+
+[part="item"] ::slotted(*) {
+max-block-size: 100%;
+max-inline-size: 100%;
+object-fit: contain;
+}
+
+[part="item"] ::slotted([slot="description"]) {
+color: var(--lightbox-item-description-color, var(--helix-color-foreground-subtle));
+font-size: var(--helix-text-sm);
+line-height: calc(var(--helix-text-sm) * var(--helix-leading-normal));
+text-align: center;
+}`);

package/dist/lightbox/item/lightbox-item.d.ts

@@ -0,0 +1,28 @@
+import { HelixHeadlessLightboxItem } from '@fusion.dev/helix-headless/lightbox';
+import type { CSSResultGroup } from 'lit';
+/**
+ * @summary One thing a lightbox can show.
+ *
+ * @description
+ * Presentation only: the box centers what it was given and holds it inside the
+ * viewport rather than sizing it, because what is in here is the consumer's and
+ * may be a picture, a frame of video or a chart. Which item is shown, and the
+ * arithmetic that decides, is the base class.
+ *
+ * @since 0.100.0
+ * @status stable
+ * @category media
+ * @aliases LightboxSlide, GalleryItem
+ * @documentation https://fusion.dev/helix/components/lightbox
+ *
+ * @cssproperty --lightbox-item-description-color - Color of the line under the content.
+ * @cssproperty --lightbox-item-gap - Space between the content and the line under it.
+ */
+export declare class HelixLightboxItem extends HelixHeadlessLightboxItem {
+    static styles: CSSResultGroup;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-lightbox-item': HelixLightboxItem;
+    }
+}

package/dist/lightbox/item/lightbox-item.js

@@ -0,0 +1,16 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { customElement } from '@fusion.dev/helix-core';
+import { HelixHeadlessLightboxItem } from '@fusion.dev/helix-headless/lightbox';
+import { styles } from './lightbox-item.css.js';
+let HelixLightboxItem = class HelixLightboxItem extends HelixHeadlessLightboxItem {
+    static { this.styles = styles; }
+};
+HelixLightboxItem = __decorate([
+    customElement('helix-lightbox-item')
+], HelixLightboxItem);
+export { HelixLightboxItem };

package/dist/lightbox/root/lightbox-root.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/dist/lightbox/root/lightbox-root.css.js

@@ -0,0 +1,76 @@
+import { createSheet } from '@fusion.dev/helix-core';
+export const styles = createSheet(`:host {
+color-scheme: dark;
+display: contents;
+}
+
+[part="dialog"] {
+background-color: transparent;
+block-size: 100dvh;
+border: none;
+box-sizing: border-box;
+color: var(--lightbox-foreground, var(--helix-color-foreground));
+display: grid;
+gap: var(--lightbox-gap, var(--helix-space-sm));
+grid-template-rows: auto 1fr auto;
+inline-size: 100vw;
+max-block-size: 100dvh;
+max-inline-size: 100vw;
+padding: var(--lightbox-padding, var(--helix-space-md));
+}
+
+[part="dialog"]:not([open]) {
+display: none;
+}
+
+:host {
+--_lightbox-scrim: var(--helix-color-background);
+}
+
+[part="dialog"]::backdrop {
+background-color: var(--lightbox-scrim, var(--_lightbox-scrim));
+}
+
+[part="viewport"] {
+align-items: center;
+display: flex;
+justify-content: center;
+
+min-block-size: 0;
+overflow: hidden;
+}
+
+::slotted([slot="header"]),
+::slotted([slot="footer"]) {
+transition:
+opacity var(--helix-duration-fast) var(--helix-easing-standard),
+visibility var(--helix-duration-fast) var(--helix-easing-standard);
+}
+
+:host(:state(idle)) ::slotted([slot="header"]),
+:host(:state(idle)) ::slotted([slot="footer"]) {
+opacity: 0;
+visibility: hidden;
+}
+
+[part="live"] {
+block-size: 1px;
+clip-path: inset(50%);
+inline-size: 1px;
+overflow: hidden;
+position: absolute;
+white-space: nowrap;
+}
+
+@media (prefers-reduced-motion: reduce) {
+::slotted([slot="header"]),
+::slotted([slot="footer"]) {
+transition: none;
+}
+}
+
+@media print {
+:host {
+display: none;
+}
+}`);

package/dist/lightbox/root/lightbox-root.d.ts

@@ -0,0 +1,41 @@
+import { HelixHeadlessLightbox } from '@fusion.dev/helix-headless/lightbox';
+import type { CSSResultGroup } from 'lit';
+/**
+ * @summary A viewer that opens one thing over the page.
+ *
+ * @description
+ * **A takeover rather than a panel, which is the whole difference from
+ * `Dialog`.** A dialog is a thing over the page and stops short of the edges to
+ * say so; a lightbox is the page for as long as it is open. The scrim is heavier
+ * for the same reason: what is behind it is not meant to be read.
+ *
+ * **A dark region that says so once**, with `color-scheme: dark` on the host,
+ * which is `Video`'s answer to the same problem: the chrome is the consumer's
+ * own components and they resolve their own tokens, so without a scheme on the
+ * region they draw page-colored ink on a black room and disappear into it.
+ *
+ * The chrome fades rather than leaves while the reader is still, because a bar
+ * that is removed from the layout takes the picture's size with it and the
+ * reader watches it jump every time they stop moving.
+ *
+ * @since 0.100.0
+ * @status stable
+ * @category media
+ * @aliases Photo viewer, Image viewer, Gallery overlay
+ * @documentation https://fusion.dev/helix/components/lightbox
+ *
+ * @event {HelixActivateEvent} helix-activate - Fired once the shown item has moved, so the element already holds it.
+ *
+ * @cssproperty --lightbox-foreground - Color of the chrome drawn over the content.
+ * @cssproperty --lightbox-gap - Space between the chrome and the content.
+ * @cssproperty --lightbox-padding - Inset from the edges of the screen.
+ * @cssproperty --lightbox-scrim - The wash over the page behind the viewer. Set on the host, where a token still resolves: a `var()` written inside `::backdrop` cannot see one.
+ */
+export declare class HelixLightbox extends HelixHeadlessLightbox {
+    static styles: CSSResultGroup;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-lightbox': HelixLightbox;
+    }
+}

package/dist/lightbox/root/lightbox-root.js

@@ -0,0 +1,16 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { customElement } from '@fusion.dev/helix-core';
+import { HelixHeadlessLightbox } from '@fusion.dev/helix-headless/lightbox';
+import { styles } from './lightbox-root.css.js';
+let HelixLightbox = class HelixLightbox extends HelixHeadlessLightbox {
+    static { this.styles = styles; }
+};
+HelixLightbox = __decorate([
+    customElement('helix-lightbox')
+], HelixLightbox);
+export { HelixLightbox };

package/dist/map/index.d.ts

@@ -0,0 +1 @@
+export { HelixMap } from './root/map-root.js';

package/dist/map/index.js

@@ -0,0 +1 @@
+export { HelixMap } from './root/map-root.js';

package/dist/map/root/map-root.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/dist/map/root/map-root.css.js

@@ -0,0 +1,112 @@
+import { createSheet } from '@fusion.dev/helix-core';
+export const styles = createSheet(`:host {
+display: contents;
+}
+
+[part="region"] {
+background-color: var(--map-background-color, var(--helix-color-surface-sunken));
+block-size: var(--map-block-size, 24rem);
+border: var(--helix-border-thin) solid var(--map-border-color, var(--helix-color-border));
+border-radius: var(--helix-radii-sm);
+box-sizing: border-box;
+display: grid;
+grid-template-rows: auto 1fr auto auto;
+overflow: hidden;
+position: relative;
+}
+
+[part="region"]:focus-within {
+outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
+outline-offset: calc(var(--helix-size-focus-offset) * -1);
+}
+
+[part="viewport"] {
+min-block-size: 0;
+overflow: hidden;
+position: relative;
+}
+
+[part="viewport"] ::slotted(*) {
+block-size: 100%;
+inline-size: 100%;
+}
+
+[part="controls"] {
+display: grid;
+gap: var(--helix-space-2xs);
+
+grid-template-areas:
+".      up    .      zoomin"
+"start  .     end    zoomout"
+".      down  .      full";
+inset-block-start: var(--helix-space-sm);
+inset-inline-end: var(--helix-space-sm);
+position: absolute;
+transition: opacity var(--helix-duration-fast) var(--helix-easing-standard);
+}
+
+[part="pan-up"] {
+grid-area: up;
+}
+[part="pan-down"] {
+grid-area: down;
+}
+[part="pan-start"] {
+grid-area: start;
+}
+[part="pan-end"] {
+grid-area: end;
+}
+[part="zoom-in"] {
+grid-area: zoomin;
+}
+[part="zoom-out"] {
+grid-area: zoomout;
+}
+[part="fullscreen"] {
+grid-area: full;
+}
+
+[part="controls"] button {
+align-items: center;
+background-color: var(--map-control-background-color, var(--helix-color-surface-overlay));
+border: var(--helix-border-thin) solid var(--helix-color-border);
+border-radius: var(--helix-radii-sm);
+block-size: var(--helix-size-control-sm);
+color: var(--helix-color-foreground);
+cursor: pointer;
+display: inline-flex;
+font-family: var(--helix-font-sans);
+font-size: var(--helix-text-sm);
+inline-size: var(--helix-size-control-sm);
+justify-content: center;
+padding: 0;
+}
+
+[part="controls"] button:hover {
+background-color: var(--helix-color-surface-raised);
+}
+
+:host(:state(idle)) ::slotted([slot="header"]),
+:host(:state(idle)) ::slotted([slot="footer"]) {
+opacity: 0;
+transition: opacity var(--helix-duration-fast) var(--helix-easing-standard);
+}
+
+::slotted([slot="attribution"]) {
+color: var(--helix-color-foreground-subtle);
+font-size: var(--helix-text-xs);
+padding: var(--helix-space-2xs) var(--helix-space-xs);
+}
+
+:host(:state(fullscreen)) [part="region"] {
+block-size: 100dvh;
+border: none;
+border-radius: 0;
+}
+
+@media print {
+[part="controls"] {
+display: none;
+}
+}`);

package/dist/map/root/map-root.d.ts

@@ -0,0 +1,33 @@
+import { HelixHeadlessMap } from '@fusion.dev/helix-headless/map';
+import type { CSSResultGroup } from 'lit';
+/**
+ * @summary A frame around somebody else's map.
+ *
+ * @description
+ * Presentation only: a bordered well with the controls over it, at the corner
+ * every map puts them. What the frame is for, and why the controls are buttons
+ * rather than arrow keys, is the base class.
+ *
+ * **The controls do not fade with the chrome.** A reader who has gone still has
+ * not stopped needing the only controls this frame offers, so the idle state
+ * takes the header and footer a consumer slotted and leaves the buttons alone.
+ *
+ * @since 0.100.0
+ * @status stable
+ * @category media
+ * @aliases Map frame, Map container, Geo
+ * @documentation https://fusion.dev/helix/components/map
+ *
+ * @cssproperty --map-background-color - The well behind the map, seen while tiles are on their way.
+ * @cssproperty --map-block-size - How tall the frame is. A length, since the map fills it.
+ * @cssproperty --map-border-color - Color of the frame's edge.
+ * @cssproperty --map-control-background-color - The ground under the pan and zoom buttons.
+ */
+export declare class HelixMap extends HelixHeadlessMap {
+    static styles: CSSResultGroup;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-map': HelixMap;
+    }
+}

package/dist/map/root/map-root.js

@@ -0,0 +1,16 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { customElement } from '@fusion.dev/helix-core';
+import { HelixHeadlessMap } from '@fusion.dev/helix-headless/map';
+import { styles } from './map-root.css.js';
+let HelixMap = class HelixMap extends HelixHeadlessMap {
+    static { this.styles = styles; }
+};
+HelixMap = __decorate([
+    customElement('helix-map')
+], HelixMap);
+export { HelixMap };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@fusion.dev/helix",
   "description": "Styled component tier. Extends the headless tier with token-driven presentation.",
-  "version": "0.100.0",
+  "version": "0.102.0",
   "license": "MIT",
   "author": "Ross Sheppard <ross.sheppard@fusion.dev>",
   "repository": {
@@ -47,13 +47,13 @@
   },
   "bugs": "https://github.com/project-fusion/fusion/issues",
   "dependencies": {
-    "@fusion.dev/helix-core": "0.100.0",
-    "@fusion.dev/helix-headless": "0.100.0",
-    "@fusion.dev/helix-styles": "0.100.0"
+    "@fusion.dev/helix-core": "0.102.0",
+    "@fusion.dev/helix-headless": "0.102.0",
+    "@fusion.dev/helix-styles": "0.102.0"
   },
   "devDependencies": {
-    "@fusion.dev/helix-cem": "0.100.0",
-    "@fusion.dev/helix-testing": "0.100.0",
+    "@fusion.dev/helix-cem": "0.102.0",
+    "@fusion.dev/helix-testing": "0.102.0",
     "@fusion.dev/scripts": "0.0.0-dev",
     "@happy-dom/global-registrator": "^20.0.0",
     "@lit-labs/ssr": "^4.1.0",