@fusion.dev/helix 0.210.0 → 0.211.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/api.json +1 -1
- package/custom-elements.json +1 -1
- package/dist/canvas/root/canvas-root.d.ts +4 -0
- package/dist/canvas/root/canvas-root.js +4 -0
- package/dist/graph/root/graph-root.d.ts +5 -0
- package/dist/graph/root/graph-root.js +5 -0
- package/dist/icon-button/root/icon-button-root.css.js +1 -1
- package/dist/icon-button/root/icon-button-root.d.ts +24 -5
- package/dist/icon-button/root/icon-button-root.js +3 -0
- package/dist/map/root/map-root.css.js +1 -1
- package/dist/map/root/map-root.d.ts +5 -0
- package/dist/map/root/map-root.js +5 -0
- package/dist/shared/viewport/viewport.css.js +1 -1
- package/lint.json +1 -1
- package/package.json +6 -6
- package/skills/helix/SKILL.md +2 -2
- package/types/jsx.d.ts +302 -22
- package/types/vue.d.ts +22 -6
|
@@ -1,5 +1,7 @@
|
|
|
1
|
+
import { type ViewportControlAxes } from '@fusion.dev/helix-core';
|
|
1
2
|
import { HelixHeadlessCanvas } from '@fusion.dev/helix-headless/canvas';
|
|
2
3
|
import type { CSSResultGroup } from 'lit';
|
|
4
|
+
import '../../icon-button/index.js';
|
|
3
5
|
/**
|
|
4
6
|
* @summary A board of cards and the connections between them, which can be navigated, rearranged, and connected.
|
|
5
7
|
*
|
|
@@ -60,6 +62,8 @@ export declare class HelixCanvas extends HelixHeadlessCanvas {
|
|
|
60
62
|
* Absent is no ruling, a resting value being an attribute's absence.
|
|
61
63
|
*/
|
|
62
64
|
grid?: 'lines' | 'dots';
|
|
65
|
+
/** The controls float over the board, so they are raised. */
|
|
66
|
+
protected get controlAxes(): ViewportControlAxes;
|
|
63
67
|
/**
|
|
64
68
|
* How the board is set apart from the page. `plain` draws no frame.
|
|
65
69
|
*
|
|
@@ -5,8 +5,12 @@ import { property } from 'lit/decorators.js';
|
|
|
5
5
|
import { styles as liveStyles } from '../../shared/live/live.css.js';
|
|
6
6
|
import { styles as viewportStyles } from '../../shared/viewport/viewport.css.js';
|
|
7
7
|
import { styles } from './canvas-root.css.js';
|
|
8
|
+
import '../../icon-button/index.js';
|
|
8
9
|
let HelixCanvas = class HelixCanvas extends HelixHeadlessCanvas {
|
|
9
10
|
static { this.tier = 'helix-'; }
|
|
11
|
+
get controlAxes() {
|
|
12
|
+
return { raised: true };
|
|
13
|
+
}
|
|
10
14
|
static { this.styles = [liveStyles, viewportStyles, styles]; }
|
|
11
15
|
};
|
|
12
16
|
__decorate([
|
|
@@ -1,5 +1,7 @@
|
|
|
1
|
+
import { type ViewportControlAxes } from '@fusion.dev/helix-core';
|
|
1
2
|
import { HelixHeadlessGraph } from '@fusion.dev/helix-headless/graph';
|
|
2
3
|
import type { CSSResultGroup } from 'lit';
|
|
4
|
+
import '../../icon-button/index.js';
|
|
3
5
|
/**
|
|
4
6
|
* @summary A frame around a graph of notes drawn by another library, and the list that makes it readable.
|
|
5
7
|
*
|
|
@@ -36,6 +38,9 @@ import type { CSSResultGroup } from 'lit';
|
|
|
36
38
|
* @cssproperty --viewport-control-background-color - The background of the zoom and fullscreen buttons. Map and Canvas use the same property.
|
|
37
39
|
*/
|
|
38
40
|
export declare class HelixGraph extends HelixHeadlessGraph {
|
|
41
|
+
static tier: string;
|
|
42
|
+
/** The controls float over the drawing, so they are raised. */
|
|
43
|
+
protected get controlAxes(): ViewportControlAxes;
|
|
39
44
|
static styles: CSSResultGroup;
|
|
40
45
|
}
|
|
41
46
|
declare global {
|
|
@@ -4,7 +4,12 @@ import { HelixHeadlessGraph } from '@fusion.dev/helix-headless/graph';
|
|
|
4
4
|
import { styles as liveStyles } from '../../shared/live/live.css.js';
|
|
5
5
|
import { styles as viewportStyles } from '../../shared/viewport/viewport.css.js';
|
|
6
6
|
import { styles } from './graph-root.css.js';
|
|
7
|
+
import '../../icon-button/index.js';
|
|
7
8
|
let HelixGraph = class HelixGraph extends HelixHeadlessGraph {
|
|
9
|
+
static { this.tier = 'helix-'; }
|
|
10
|
+
get controlAxes() {
|
|
11
|
+
return { raised: true };
|
|
12
|
+
}
|
|
8
13
|
static { this.styles = [liveStyles, viewportStyles, styles]; }
|
|
9
14
|
};
|
|
10
15
|
HelixGraph = __decorate([
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import { createSheet } from '@fusion.dev/helix-core';
|
|
2
|
-
export const styles = createSheet(`:host {--_icon-button-size: var(--icon-button-size, var(--helix-size-control));display: inline-flex}:host {--_icon-button-edge: var(--helix-color-border);--_icon-button-crawl: 4s;--_icon-button-turn: 0.8s;--_icon-button-ink: var(--helix-color-foreground-muted);--_icon-button-ink-hover: var(--helix-color-foreground);--_icon-button-fill: var(--_icon-button-tone);--_icon-button-fill-hover: var(--_icon-button-tone-hover);--_icon-button-on-tone: var(--helix-color-background);--_icon-button-tone: var(--helix-color-foreground);--_icon-button-tone-hover: color-mix(in oklab, var(--helix-color-foreground) 86%, var(--helix-color-background))}:host([tone="primary"]) {--_icon-button-edge: var(--helix-color-primary);--_icon-button-ink: var(--helix-color-primary);--_icon-button-ink-hover: var(--helix-color-primary);--_icon-button-fill: var(--helix-color-primary-surface);--_icon-button-fill-hover: var(--helix-color-primary-surface-hover);--_icon-button-on-tone: var(--helix-color-foreground-on-primary);--_icon-button-tone: var(--helix-color-primary);--_icon-button-tone-hover: var(--helix-color-primary-hover)}:host([tone="accent"]) {--_icon-button-edge: var(--helix-color-accent);--_icon-button-ink: var(--helix-color-accent);--_icon-button-ink-hover: var(--helix-color-accent);--_icon-button-fill: var(--helix-color-accent-surface);--_icon-button-fill-hover: var(--helix-color-accent-surface-hover);--_icon-button-on-tone: var(--helix-color-foreground-on-accent);--_icon-button-tone: var(--helix-color-accent);--_icon-button-tone-hover: var(--helix-color-accent-hover)}:host([tone="danger"]) {--_icon-button-edge: var(--helix-color-danger);--_icon-button-ink: var(--helix-color-danger);--_icon-button-ink-hover: var(--helix-color-danger);--_icon-button-fill: var(--helix-color-danger-surface);--_icon-button-fill-hover: var(--helix-color-danger-surface-hover);--_icon-button-on-tone: var(--helix-color-foreground-on-status);--_icon-button-tone: var(--helix-color-danger);--_icon-button-tone-hover: color-mix(in oklab, var(--helix-color-danger) 86%, var(--helix-color-foreground))}[part="button"] {align-items: center;background-color: var(--_icon-button-pressed-fill, var(--icon-button-background-color, transparent));block-size: var(--_icon-button-size);border: var(--
|
|
2
|
+
export const styles = createSheet(`:host {--_icon-button-size: var(--icon-button-size, var(--helix-size-control));display: inline-flex}:host {--_icon-button-edge: var(--helix-color-border);--_icon-button-crawl: 4s;--_icon-button-turn: 0.8s;--_icon-button-ink: var(--helix-color-foreground-muted);--_icon-button-ink-hover: var(--helix-color-foreground);--_icon-button-fill: var(--_icon-button-tone);--_icon-button-fill-hover: var(--_icon-button-tone-hover);--_icon-button-on-tone: var(--helix-color-background);--_icon-button-tone: var(--helix-color-foreground);--_icon-button-tone-hover: color-mix(in oklab, var(--helix-color-foreground) 86%, var(--helix-color-background))}:host([tone="primary"]) {--_icon-button-edge: var(--helix-color-primary);--_icon-button-ink: var(--helix-color-primary);--_icon-button-ink-hover: var(--helix-color-primary);--_icon-button-fill: var(--helix-color-primary-surface);--_icon-button-fill-hover: var(--helix-color-primary-surface-hover);--_icon-button-on-tone: var(--helix-color-foreground-on-primary);--_icon-button-tone: var(--helix-color-primary);--_icon-button-tone-hover: var(--helix-color-primary-hover)}:host([tone="accent"]) {--_icon-button-edge: var(--helix-color-accent);--_icon-button-ink: var(--helix-color-accent);--_icon-button-ink-hover: var(--helix-color-accent);--_icon-button-fill: var(--helix-color-accent-surface);--_icon-button-fill-hover: var(--helix-color-accent-surface-hover);--_icon-button-on-tone: var(--helix-color-foreground-on-accent);--_icon-button-tone: var(--helix-color-accent);--_icon-button-tone-hover: var(--helix-color-accent-hover)}:host([tone="danger"]) {--_icon-button-edge: var(--helix-color-danger);--_icon-button-ink: var(--helix-color-danger);--_icon-button-ink-hover: var(--helix-color-danger);--_icon-button-fill: var(--helix-color-danger-surface);--_icon-button-fill-hover: var(--helix-color-danger-surface-hover);--_icon-button-on-tone: var(--helix-color-foreground-on-status);--_icon-button-tone: var(--helix-color-danger);--_icon-button-tone-hover: color-mix(in oklab, var(--helix-color-danger) 86%, var(--helix-color-foreground))}[part="button"] {align-items: center;background-color: var(--_icon-button-pressed-fill, var(--icon-button-background-color, transparent));block-size: var(--_icon-button-size);border-color: var(--icon-button-border-color, transparent);border-style: solid;border-width: var(--icon-button-border-width, var(--helix-border-thin));border-end-end-radius: var(--button-radius-end-end, var(--button-radius-end, var(--icon-button-radius, var(--helix-radii-sm))));border-end-start-radius: var(--button-radius-end-start, var(--button-radius-start, var(--icon-button-radius, var(--helix-radii-sm))));border-start-end-radius: var(--button-radius-start-end, var(--button-radius-end, var(--icon-button-radius, var(--helix-radii-sm))));border-start-start-radius: var(--button-radius-start-start, var(--button-radius-start, var(--icon-button-radius, var(--helix-radii-sm))));color: var(--_icon-button-pressed-ink, var(--icon-button-foreground-color, var(--_icon-button-ink)));cursor: pointer;display: inline-flex;font: inherit;inline-size: var(--_icon-button-size);justify-content: center;padding: var(--helix-space-none);transition: background-color var(--helix-duration-fast) var(--helix-easing-standard), color var(--helix-duration-fast) var(--helix-easing-standard)}:host(:not(:disabled)) [part="button"]:hover {background-color: var(--_icon-button-pressed-fill, var(--icon-button-background-color-hover, var(--icon-button-background-color, color-mix(in oklab, var(--_icon-button-tone) 8%, transparent))));color: var(--_icon-button-pressed-ink, var(--icon-button-foreground-color, var(--_icon-button-ink-hover)))}:host(:not(:disabled)) [part="button"]:active {--_icon-button-pressed-fill: var(--icon-button-background-color-active);--_icon-button-pressed-ink: var(--icon-button-foreground-color-active)}:host([shape="circle"]) [part="button"] {border-radius: var(--helix-radii-full)}[part="button"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset)}:host([emphasis="solid"]) [part="button"] {background-color: var(--_icon-button-pressed-fill, var(--icon-button-background-color, var(--_icon-button-fill)));border-color: var(--icon-button-border-color, transparent);color: var(--_icon-button-pressed-ink, var(--icon-button-foreground-color, var(--_icon-button-on-tone)))}:host(:not(:disabled)[emphasis="solid"]) [part="button"]:hover {background-color: var(--_icon-button-pressed-fill, var(--icon-button-background-color-hover, var(--icon-button-background-color, var(--_icon-button-fill-hover))));color: var(--_icon-button-pressed-ink, var(--icon-button-foreground-color, var(--_icon-button-on-tone)))}:host([emphasis="outlined"]) [part="button"] {background-color: var(--_icon-button-pressed-fill, var(--icon-button-background-color, color-mix(in oklab, var(--_icon-button-tone) 6%, transparent)));border-color: var(--icon-button-border-color, var(--_icon-button-edge));color: var(--_icon-button-pressed-ink, var(--icon-button-foreground-color, var(--_icon-button-tone)))}:host(:not(:disabled)[emphasis="outlined"]) [part="button"]:hover {background-color: var(--_icon-button-pressed-fill, var(--icon-button-background-color-hover, var(--icon-button-background-color, color-mix(in oklab, var(--_icon-button-tone) 12%, transparent))));color: var(--_icon-button-pressed-ink, var(--icon-button-foreground-color, var(--_icon-button-tone)))}:host([emphasis="subtle"]) [part="button"] {background-color: var(--_icon-button-pressed-fill, var(--icon-button-background-color, color-mix(in oklab, var(--_icon-button-tone) 14%, transparent)));border-color: var(--icon-button-border-color, transparent);color: var(--_icon-button-pressed-ink, var(--icon-button-foreground-color, var(--_icon-button-tone)))}:host(:not(:disabled)[emphasis="subtle"]) [part="button"]:hover {background-color: var(--_icon-button-pressed-fill, var(--icon-button-background-color-hover, var(--icon-button-background-color, color-mix(in oklab, var(--_icon-button-tone) 22%, transparent))));color: var(--_icon-button-pressed-ink, var(--icon-button-foreground-color, var(--_icon-button-tone)))}:host(:disabled) [part="button"] {cursor: not-allowed;opacity: 0.5}:host(:state(pending)) [part="button"] {cursor: progress;position: relative}:host(:state(pending)) [part="button"] > :not([part="spinner"]) {visibility: hidden}[part="spinner"] {animation: helix-icon-button-turn var(--icon-button-spinner-duration, var(--_icon-button-turn)) linear infinite;block-size: var(--icon-button-spinner-size, 1.15em);border: var(--helix-border-thick) solid color-mix(in oklab, var(--icon-button-spinner-color, currentColor) 30%, transparent);border-block-start-color: var(--icon-button-spinner-color, currentColor);border-radius: var(--helix-radii-full);box-sizing: border-box;inline-size: var(--icon-button-spinner-size, 1.15em);inset: 0;margin: auto;position: absolute}@keyframes helix-icon-button-turn {to {rotate: 1turn}}@media (prefers-reduced-motion: reduce) {[part="spinner"] {animation-duration: var(--_icon-button-crawl)}}:host([raised]) [part="button"] {border-width: var(--icon-button-border-width, var(--helix-border-floating));box-shadow: var(--icon-button-shadow, var(--helix-shadow-floating))}:host([raised]:not([emphasis])) [part="button"], :host([raised][emphasis="ghost"]) [part="button"] {border-color: var(--icon-button-border-color, var(--helix-color-border))}:host([material="glass"]:not([emphasis="solid"])) [part="button"] {backdrop-filter: var(--icon-button-backdrop, var(--helix-material-backdrop));background-color: var(--_icon-button-pressed-fill, var(--icon-button-background-color, var(--helix-material-translucent)))}:host([material="frosted"]:not([emphasis="solid"])) [part="button"] {backdrop-filter: var(--icon-button-backdrop, blur(var(--helix-material-blur-lg)));background-color: var(--_icon-button-pressed-fill, var(--icon-button-background-color, var(--helix-material-translucent-strong)))}:host([material="transparent"]:not([emphasis="solid"])) [part="button"] {backdrop-filter: none;background-color: var(--_icon-button-pressed-fill, var(--icon-button-background-color, transparent))}:host([raised]:not([emphasis]):not([material])) [part="button"], :host([raised][emphasis="ghost"]:not([material])) [part="button"] {background-color: var(--_icon-button-pressed-fill, var(--icon-button-background-color, var(--helix-color-surface-overlay)))}:host([material]:not([emphasis="solid"]):not(:disabled)) [part="button"]:hover {background-color: var(--_icon-button-pressed-fill, var(--icon-button-background-color-hover, color-mix(in oklab, var(--helix-color-foreground) 10%, var(--helix-color-surface-overlay))))}:host([raised]:not(:disabled):not([emphasis]):not([material])) [part="button"]:hover, :host([raised][emphasis="ghost"]:not(:disabled):not([material])) [part="button"]:hover {background-color: var(--_icon-button-pressed-fill, var(--icon-button-background-color-hover, color-mix(in oklab, var(--helix-color-foreground) 10%, var(--helix-color-surface-overlay))))}@media print {:host {display: none}}`);
|
|
@@ -13,6 +13,10 @@ declare const HelixIconButton_base: (new (...args: any[]) => import("../../share
|
|
|
13
13
|
* as "button" and nothing else, which is the most common way a toolbar becomes
|
|
14
14
|
* unusable without sight.
|
|
15
15
|
*
|
|
16
|
+
* Set `raised` for a button that floats over the page, such as one over a map
|
|
17
|
+
* or a board, and `material` for the ground under it there. A raised button
|
|
18
|
+
* takes the theme's floating edge and shadow, as a popover does.
|
|
19
|
+
*
|
|
16
20
|
* @since 0.1.0
|
|
17
21
|
* @status stable
|
|
18
22
|
* @category actions
|
|
@@ -25,13 +29,16 @@ declare const HelixIconButton_base: (new (...args: any[]) => import("../../share
|
|
|
25
29
|
* @csspart live - The live region that says `pending-label` when the button becomes pending under focus. It is clipped out of view and still read.
|
|
26
30
|
* @csspart spinner - The ring a pending button turns over its icon, sized and colored by the `--icon-button-spinner-*` hooks.
|
|
27
31
|
*
|
|
32
|
+
* @cssproperty --icon-button-backdrop - The filter behind a button with `material`, which a translucent ground needs to be read.
|
|
28
33
|
* @cssproperty --icon-button-background-color - Fill behind the button, in every state.
|
|
29
34
|
* @cssproperty --icon-button-background-color-active - Fill behind the button while it is pressed. Without it, a press shows the fill of the state under it.
|
|
30
35
|
* @cssproperty --icon-button-background-color-hover - Fill behind the button under the pointer. Without it, `--icon-button-background-color` also applies on hover.
|
|
36
|
+
* @cssproperty --icon-button-border-color - Edge color of the control, where its emphasis or `raised` draws an edge.
|
|
37
|
+
* @cssproperty --icon-button-border-width - Edge width of the control, one to four widths as `border-width` takes them. The theme's floating edge on a raised button, `--helix-border-floating`.
|
|
31
38
|
* @cssproperty --icon-button-foreground-color - Icon color.
|
|
32
39
|
* @cssproperty --icon-button-foreground-color-active - Icon color while the button is pressed. Without it, a press shows the color of the state under it.
|
|
33
|
-
* @cssproperty --icon-button-radius - Corner radius of the control, which a group flattens through `--button-radius-start` and `--button-radius-end
|
|
34
|
-
* @cssproperty --icon-button-shadow - Shadow of a raised icon button.
|
|
40
|
+
* @cssproperty --icon-button-radius - Corner radius of the control, which a group flattens through `--button-radius-start` and `--button-radius-end`, or a corner at a time through `--button-radius-start-start`, `--button-radius-start-end`, `--button-radius-end-start` and `--button-radius-end-end`, as Button reads them.
|
|
41
|
+
* @cssproperty --icon-button-shadow - Shadow of a raised icon button. The theme's floating shadow, `--helix-shadow-floating`.
|
|
35
42
|
* @cssproperty --icon-button-size - Edge length of the control.
|
|
36
43
|
* @cssproperty --icon-button-spinner-color - Color of the ring a pending button turns. It follows the icon's color.
|
|
37
44
|
* @cssproperty --icon-button-spinner-duration - How long the ring takes to turn once.
|
|
@@ -42,12 +49,24 @@ declare const HelixIconButton_base: (new (...args: any[]) => import("../../share
|
|
|
42
49
|
*/
|
|
43
50
|
export declare class HelixIconButton extends HelixIconButton_base {
|
|
44
51
|
/**
|
|
45
|
-
*
|
|
52
|
+
* The ground under the button, for one that lies over a busy surface such as
|
|
53
|
+
* a map or a board. `glass` lets the surface through under a blur, `frosted`
|
|
54
|
+
* turns the pair up for a surface too busy for glass, and `transparent` draws
|
|
55
|
+
* no ground at all. Unset, the ground is the emphasis's own.
|
|
56
|
+
*
|
|
57
|
+
* A solid button keeps its fill, which is what it means: the material is the
|
|
58
|
+
* ground of the other emphases.
|
|
59
|
+
*/
|
|
60
|
+
material?: 'frosted' | 'glass' | 'transparent';
|
|
61
|
+
/**
|
|
62
|
+
* Floats the button over the page, with the theme's floating edge and shadow,
|
|
63
|
+
* as a popover floats. A ghost button that floats is drawn on the overlay a
|
|
64
|
+
* floating panel uses, so its glyph has a ground under it.
|
|
46
65
|
*
|
|
47
66
|
* Separate from `shape`, because they are separate facts: a docked control is
|
|
48
67
|
* raised whatever its outline, and a circle inside a toolbar is not raised at
|
|
49
|
-
* all.
|
|
50
|
-
*
|
|
68
|
+
* all. The theme says whether what floats is told apart by a shadow, a line,
|
|
69
|
+
* or both, and a raised button follows it as every floating panel does.
|
|
51
70
|
*/
|
|
52
71
|
raised: boolean;
|
|
53
72
|
/**
|
|
@@ -12,6 +12,9 @@ let HelixIconButton = class HelixIconButton extends MixinControlSurface(HelixHea
|
|
|
12
12
|
}
|
|
13
13
|
static { this.styles = [liveStyles, styles]; }
|
|
14
14
|
};
|
|
15
|
+
__decorate([
|
|
16
|
+
property({ reflect: true })
|
|
17
|
+
], HelixIconButton.prototype, "material", void 0);
|
|
15
18
|
__decorate([
|
|
16
19
|
property({ reflect: true, type: Boolean })
|
|
17
20
|
], HelixIconButton.prototype, "raised", void 0);
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import { createSheet } from '@fusion.dev/helix-core';
|
|
2
|
-
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(--map-radius, var(--helix-radii-sm));box-sizing: border-box;display: grid;grid-template-rows: auto 1fr auto auto;overflow: hidden;position: relative}:host([fill]) [part="region"] {block-size: auto;border: none;border-radius: 0;container-type: size;inset: 0;position: absolute}[part="viewport"] {isolation: isolate;min-block-size: 0;overflow: hidden;position: relative}[part="layers"] {block-size: 1px;clip-path: inset(50%);inline-size: 1px;margin: var(--helix-space-none);overflow: hidden;padding: var(--helix-space-none);position: absolute;white-space: nowrap}[part="viewport"] ::slotted(:not(helix-map-marker, helix-map-points, helix-map-position)) {block-size: 100%;inline-size: 100%}: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"]) {border-block-start: var(--helix-border-thin) solid var(--map-attribution-border-color, var(--helix-color-border));color: var(--map-attribution-color, var(--helix-color-foreground-muted));display: block;font-size: var(--map-attribution-font-size, var(--helix-text-xs));padding: var(--helix-space-2xs) var(--helix-space-xs)}:host([credit-placement]) [part="attribution"] {inset-block-end: var(--helix-space-2xs);max-inline-size: calc(100% - var(--helix-space-2xs) * 2);position: absolute}:host([credit-placement="bottom-end"]) [part="attribution"] {inset-inline-end: var(--helix-space-2xs)}:host([credit-placement="bottom-start"]) [part="attribution"] {inset-inline-start: var(--helix-space-2xs)}:host([credit-placement]) ::slotted([slot="attribution"]) {backdrop-filter: var(--helix-material-backdrop);background-color: var(--helix-material-translucent);border-block-start: none;border-radius: var(--helix-radii-sm);color: var(--map-attribution-color, var(--helix-color-foreground-muted));overflow: hidden;padding: var(--helix-space-none) var(--helix-space-xs);text-overflow: ellipsis;white-space: nowrap}:host([credit-placement]) [part="attribution"]:is(:hover, :focus-within) ::slotted([slot="attribution"]) {white-space: normal}
|
|
2
|
+
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(--map-radius, var(--helix-radii-sm));box-sizing: border-box;display: grid;grid-template-rows: auto 1fr auto auto;overflow: hidden;position: relative}:host([fill]) [part="region"] {block-size: auto;border: none;border-radius: 0;container-type: size;inset: 0;position: absolute}[part="viewport"] {isolation: isolate;min-block-size: 0;overflow: hidden;position: relative}[part="layers"] {block-size: 1px;clip-path: inset(50%);inline-size: 1px;margin: var(--helix-space-none);overflow: hidden;padding: var(--helix-space-none);position: absolute;white-space: nowrap}[part="viewport"] ::slotted(:not(helix-map-marker, helix-map-points, helix-map-position)) {block-size: 100%;inline-size: 100%}: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"]) {border-block-start: var(--helix-border-thin) solid var(--map-attribution-border-color, var(--helix-color-border));color: var(--map-attribution-color, var(--helix-color-foreground-muted));display: block;font-size: var(--map-attribution-font-size, var(--helix-text-xs));padding: var(--helix-space-2xs) var(--helix-space-xs)}:host([credit-placement]) [part="attribution"] {inset-block-end: var(--helix-space-2xs);max-inline-size: calc(100% - var(--helix-space-2xs) * 2);position: absolute}:host([credit-placement="bottom-end"]) [part="attribution"] {inset-inline-end: var(--helix-space-2xs)}:host([credit-placement="bottom-start"]) [part="attribution"] {inset-inline-start: var(--helix-space-2xs)}:host([credit-placement]) ::slotted([slot="attribution"]) {backdrop-filter: var(--helix-material-backdrop);background-color: var(--helix-material-translucent);border-block-start: none;border-radius: var(--helix-radii-sm);color: var(--map-attribution-color, var(--helix-color-foreground-muted));overflow: hidden;padding: var(--helix-space-none) var(--helix-space-xs);text-overflow: ellipsis;white-space: nowrap}:host([credit-placement]) [part="attribution"]:is(:hover, :focus-within) ::slotted([slot="attribution"]) {white-space: normal}@media print {[part="controls"] {display: none}}[part="controls"] {align-items: center;display: flex;flex-direction: column;grid-column: 1 / -1;grid-row: 2 / 3}[part="controls"] [part="zoom-in"] {--button-radius-end-end: var(--helix-radii-none);--button-radius-end-start: var(--helix-radii-none)}[part="controls"] [part="zoom-out"] {--button-radius-start-end: var(--helix-radii-none);--button-radius-start-start: var(--helix-radii-none);--icon-button-border-width: 0 var(--helix-border-floating) var(--helix-border-floating);--icon-button-shadow: var(--helix-shadow-floating);margin-block-start: calc(-1 * var(--helix-space-2xs))}[part="controls"] [part="face-north"] ::slotted(*) {--icon-size: var(--helix-size-icon-md);block-size: var(--helix-size-icon-md);inline-size: var(--helix-size-icon-md)}[part="tilt"] {font-size: var(--helix-text-xs);font-weight: var(--helix-weight-semibold)}[part="tilt"][aria-pressed="true"] {--icon-button-background-color: var(--map-chosen-color, var(--helix-color-primary-surface));--icon-button-background-color-hover: var(--helix-color-primary-surface-hover);--icon-button-border-color: var(--map-chosen-color, var(--helix-color-primary-surface));--icon-button-foreground-color: var(--helix-color-foreground-on-primary)}[part="compass"] {border-radius: var(--helix-radii-sm);display: grid;grid-template-areas: "rotl up rotr" "start north end" ". down .";place-items: center}[part="rotate-left"] {grid-area: rotl}[part="rotate-right"] {grid-area: rotr}[part="face-north"] {grid-area: north}[part="compass"] > :not([part="face-north"]) {--icon-button-background-color: transparent;--icon-button-size: calc(var(--helix-size-control-sm) * 0.75);font-size: var(--helix-text-xs)}[part="compass"]:has(> :not([part="face-north"])) {background-color: var(--viewport-control-background-color, var(--helix-color-surface-overlay));box-shadow: var(--helix-shadow-floating), 0 0 0 var(--helix-border-floating) var(--helix-color-border)}[part="needle"] {block-size: var(--helix-size-icon-md);inline-size: var(--helix-size-icon-md);transform: rotate(var(--map-needle-turn, 0deg))}[part="needle"] [data-end="north"] {fill: var(--map-needle-north-color, var(--helix-color-danger))}[part="needle"] [data-end="south"] {fill: var(--map-needle-south-color, var(--helix-color-foreground-muted))}[part="layers-menu"] {font-family: inherit;font-size: inherit;background-color: var(--viewport-control-background-color, var(--helix-color-surface-overlay));border: var(--helix-border-floating) solid var(--helix-color-border);border-radius: var(--helix-radii-sm);box-shadow: var(--helix-shadow-floating);color: var(--helix-color-foreground);display: grid;gap: var(--map-layers-menu-gap, var(--helix-space-sm));inline-size: var(--map-layers-menu-inline-size, min(calc(var(--helix-size-control-lg) * 6), 70vw));inset-block-start: 0;inset-inline-end: calc(100% + var(--helix-space-2xs));max-block-size: calc(var(--map-block-size, 24rem) - var(--helix-space-sm) * 2);overflow-y: auto;padding: var(--map-layers-menu-padding, var(--helix-space-sm));position: absolute}:host([fill]) [part="layers-menu"] {max-block-size: calc(100cqb - var(--helix-space-sm) * 2)}[part="layers-menu"][hidden] {display: none}:host([controls-placement^="bottom"]) [part="layers-menu"] {inset-block: auto 0}:host([controls-placement$="start"]) [part="layers-menu"] {inset-inline: calc(100% + var(--helix-space-2xs)) auto}[part="map-types"] {display: grid;gap: var(--helix-space-xs);grid-template-columns: repeat(3, 1fr)}[part="map-type"] {color: var(--helix-color-foreground-muted);cursor: pointer;display: grid;font-family: var(--helix-font-sans);font-size: var(--helix-text-xs);gap: var(--helix-space-2xs);justify-items: center;position: relative}[part="map-type"] input {block-size: 1px;inline-size: 1px;margin: 0;opacity: 0;pointer-events: none;position: absolute}[part="map-type-preview"] {aspect-ratio: 4 / 3;background-color: var(--helix-color-surface-sunken);border: var(--helix-border-thick) solid transparent;border-radius: var(--helix-radii-sm);box-sizing: border-box;display: block;inline-size: 100%;object-fit: cover}[part="map-type"]:hover, [part="map-type"]:has(input:checked) {color: var(--helix-color-foreground)}[part="map-type"]:has(input:checked) [part="map-type-preview"] {border-color: var(--map-chosen-color, var(--helix-color-primary-surface))}[part="map-type"]:has(input:focus-visible) [part="map-type-preview"] {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset)}[part="layer-choices"] {display: grid;gap: var(--helix-space-xs);grid-template-columns: repeat(3, 1fr)}[part="layers-menu"] [part="layer-choice"] {align-content: start;cursor: pointer;font-family: var(--helix-font-sans);background-color: transparent;block-size: auto;border: 0;box-shadow: none;color: var(--helix-color-foreground-muted);display: grid;font-size: var(--helix-text-xs);gap: var(--helix-space-2xs);inline-size: auto;justify-items: center;padding: 0;text-align: center}[part="layers-menu"] [part="layer-choice"]:hover, [part="layers-menu"] [part="layer-choice"][aria-pressed="true"] {background-color: transparent;color: var(--helix-color-foreground)}[part="layers-menu"] [part="layer-choice"]:focus-visible {outline: none}[part="layer-icon"] {aspect-ratio: 4 / 3;background-color: var(--helix-color-surface-sunken);border: var(--helix-border-thick) solid transparent;border-radius: var(--helix-radii-sm);box-sizing: border-box;display: block;inline-size: 100%;padding: var(--helix-space-sm)}[part="layer-choice"][aria-pressed="true"] [part="layer-icon"] {border-color: var(--map-chosen-color, var(--helix-color-primary-surface))}[part="layer-choice"]:focus-visible [part="layer-icon"] {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset)}@media (forced-colors: active) {[part="tilt"][aria-pressed="true"] {background-color: Highlight;color: HighlightText;forced-color-adjust: none}[part="map-type"]:has(input:checked), [part="layers-menu"] [part="layer-choice"][aria-pressed="true"] {outline: var(--helix-border-thick) solid Highlight;outline-offset: var(--helix-space-2xs)}}`);
|
|
@@ -1,5 +1,7 @@
|
|
|
1
|
+
import { type ViewportControlAxes } from '@fusion.dev/helix-core';
|
|
1
2
|
import { HelixHeadlessMap } from '@fusion.dev/helix-headless/map';
|
|
2
3
|
import type { CSSResultGroup } from 'lit';
|
|
4
|
+
import '../../icon-button/index.js';
|
|
3
5
|
/**
|
|
4
6
|
* @summary A frame around a map drawn by another library.
|
|
5
7
|
*
|
|
@@ -39,6 +41,7 @@ import type { CSSResultGroup } from 'lit';
|
|
|
39
41
|
* @cssproperty --viewport-control-background-color - The background of the pan and zoom buttons. Canvas uses the same property.
|
|
40
42
|
*/
|
|
41
43
|
export declare class HelixMap extends HelixHeadlessMap {
|
|
44
|
+
static tier: string;
|
|
42
45
|
/**
|
|
43
46
|
* Where the map's credit is drawn. Unset, it is a strip under the map.
|
|
44
47
|
* `bottom-end` or `bottom-start` draws it in that corner over the map, on
|
|
@@ -60,6 +63,8 @@ export declare class HelixMap extends HelixHeadlessMap {
|
|
|
60
63
|
* no background. Your theme sets how see-through each one is.
|
|
61
64
|
*/
|
|
62
65
|
material?: 'frosted' | 'glass' | 'transparent';
|
|
66
|
+
/** The controls float over the map, so they are raised in its `material`. */
|
|
67
|
+
protected get controlAxes(): ViewportControlAxes;
|
|
63
68
|
static styles: CSSResultGroup;
|
|
64
69
|
}
|
|
65
70
|
declare global {
|
|
@@ -5,11 +5,16 @@ import { property } from 'lit/decorators.js';
|
|
|
5
5
|
import { styles as liveStyles } from '../../shared/live/live.css.js';
|
|
6
6
|
import { styles as viewportStyles } from '../../shared/viewport/viewport.css.js';
|
|
7
7
|
import { styles } from './map-root.css.js';
|
|
8
|
+
import '../../icon-button/index.js';
|
|
8
9
|
let HelixMap = class HelixMap extends HelixHeadlessMap {
|
|
9
10
|
constructor() {
|
|
10
11
|
super(...arguments);
|
|
11
12
|
this.fill = false;
|
|
12
13
|
}
|
|
14
|
+
static { this.tier = 'helix-'; }
|
|
15
|
+
get controlAxes() {
|
|
16
|
+
return { material: this.material, raised: true };
|
|
17
|
+
}
|
|
13
18
|
static { this.styles = [liveStyles, viewportStyles, styles]; }
|
|
14
19
|
};
|
|
15
20
|
__decorate([
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import { createSheet } from '@fusion.dev/helix-core';
|
|
2
|
-
export const styles = createSheet(`[part="controls"] {display: grid;gap: var(--helix-space-2xs);grid-template-areas: ". up . zoomin" "start . end zoomout" ". down . full";position: absolute;inset-block-start: var(--helix-space-sm);inset-inline-end: var(--helix-space-sm);transition: opacity var(--helix-duration-fast) var(--helix-easing-standard)}[part="controls"]:not(:has([part="zoom-in"])) {grid-template-areas: ". up ." "start . end" ". down full"}[part="controls"]:not(:has([part="pan-up"])) {grid-template-areas: "zoomin" "zoomout" "full"}:host(:fullscreen) {display: block}:host(:state(fullscreen)) [part="region"] {block-size: 100dvh;border: none;border-radius: 0}:host([controls-placement="top-end"]) [part="controls"] {inset-block: var(--helix-space-sm) auto;inset-inline: auto var(--helix-space-sm)}:host([controls-placement="top-start"]) [part="controls"] {inset-block: var(--helix-space-sm) auto;inset-inline: var(--helix-space-sm) auto}:host([controls-placement="bottom-end"]) [part="controls"] {inset-block: auto var(--helix-space-sm);inset-inline: auto var(--helix-space-sm)}:host([controls-placement="bottom-start"]) [part="controls"] {inset-block: auto var(--helix-space-sm);inset-inline: var(--helix-space-sm) auto}[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"]
|
|
2
|
+
export const styles = createSheet(`[part="controls"] {--icon-button-background-color: var(--viewport-control-background-color);--icon-button-background-color-hover: color-mix(in oklab, var(--helix-color-foreground) 10%, var(--viewport-control-background-color, var(--helix-color-surface-overlay)));--icon-button-foreground-color: var(--helix-color-foreground);--icon-button-size: var(--helix-size-control-sm);display: grid;gap: var(--helix-space-2xs);grid-template-areas: ". up . zoomin" "start . end zoomout" ". down . full";position: absolute;inset-block-start: var(--helix-space-sm);inset-inline-end: var(--helix-space-sm);transition: opacity var(--helix-duration-fast) var(--helix-easing-standard)}[part="controls"]:not(:has([part="zoom-in"])) {grid-template-areas: ". up ." "start . end" ". down full"}[part="controls"]:not(:has([part="pan-up"])) {grid-template-areas: "zoomin" "zoomout" "full"}:host(:fullscreen) {display: block}:host(:state(fullscreen)) [part="region"] {block-size: 100dvh;border: none;border-radius: 0}:host([controls-placement="top-end"]) [part="controls"] {inset-block: var(--helix-space-sm) auto;inset-inline: auto var(--helix-space-sm)}:host([controls-placement="top-start"]) [part="controls"] {inset-block: var(--helix-space-sm) auto;inset-inline: var(--helix-space-sm) auto}:host([controls-placement="bottom-end"]) [part="controls"] {inset-block: auto var(--helix-space-sm);inset-inline: auto var(--helix-space-sm)}:host([controls-placement="bottom-start"]) [part="controls"] {inset-block: auto var(--helix-space-sm);inset-inline: var(--helix-space-sm) auto}[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"] > * {font-family: var(--helix-font-sans);font-size: var(--helix-text-sm)}[part="controls"] ::slotted(*) {--icon-size: var(--helix-size-icon-sm);block-size: var(--helix-size-icon-sm);inline-size: var(--helix-size-icon-sm)}[part="gesture-hint"], [part="gesture-status"] {background-color: var(--helix-color-surface-inverse);border-radius: var(--helix-radii-sm);color: var(--helix-color-foreground-inverse);left: 50%;max-inline-size: calc(100% - var(--helix-space-lg) * 2);pointer-events: none;position: absolute;text-align: center;z-index: calc(var(--helix-layer-raised) + 2)}[part="gesture-hint"] {font-size: var(--helix-text-sm);inset-block-start: clamp(var(--helix-space-2xl), var(--_viewport-hint-y, 50%), calc(100% - var(--helix-space-2xl)));padding: var(--helix-space-xs) var(--helix-space-sm);translate: -50% -50%}[part="gesture-status"] {font-size: var(--helix-text-xs);inset-block-start: var(--helix-space-xs);padding: var(--helix-space-2xs) var(--helix-space-xs);translate: -50% 0}[part="gesture-hint"][hidden], [part="gesture-status"][hidden] {display: none}`);
|