@fusion.dev/helix 0.218.0 → 0.219.0
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/breadcrumbs/breadcrumb/breadcrumb.css.js +1 -1
- package/dist/canvas/root/canvas-root.d.ts +1 -0
- package/dist/canvas/root/canvas-root.js +1 -0
- package/dist/chat/composer/chat-composer.css.js +1 -1
- package/dist/chat/composer/chat-composer.d.ts +102 -5
- package/dist/chat/composer/chat-composer.js +134 -0
- package/dist/chat/message/chat-message.css.js +1 -1
- package/dist/chat/message/chat-message.d.ts +1 -0
- package/dist/checkbox/root/checkbox-root.css.js +1 -1
- package/dist/color-input/root/color-input-root.d.ts +1 -3
- package/dist/combobox/root/combobox-root.d.ts +1 -2
- package/dist/command/root/command-root.css.js +1 -1
- package/dist/command/root/command-root.d.ts +16 -1
- package/dist/command/root/command-root.js +16 -0
- package/dist/date-input/root/date-input-root.d.ts +1 -2
- package/dist/device-screen/root/device-screen-root.d.ts +1 -0
- package/dist/device-screen/root/device-screen-root.js +1 -0
- package/dist/dialog/root/dialog-root.css.js +1 -1
- package/dist/dialog/root/dialog-root.d.ts +14 -2
- package/dist/dialog/root/dialog-root.js +3 -0
- package/dist/drawer/root/drawer-root.css.js +1 -1
- package/dist/drawer/root/drawer-root.d.ts +1 -2
- package/dist/element-events.generated.js +1 -0
- package/dist/graph/root/graph-root.d.ts +1 -0
- package/dist/graph/root/graph-root.js +1 -0
- package/dist/kbd/root/kbd-root.css.js +1 -1
- package/dist/log/group/log-group.css.js +1 -1
- package/dist/log/line/log-line.css.js +1 -1
- package/dist/log/root/log-root.css.js +1 -1
- package/dist/log/root/log-root.d.ts +5 -1
- package/dist/map/root/map-root.css.js +1 -1
- package/dist/map/root/map-root.d.ts +1 -0
- package/dist/map/root/map-root.js +1 -0
- package/dist/megamenu/root/megamenu-root.css.js +1 -1
- package/dist/megamenu/root/megamenu-root.d.ts +2 -2
- package/dist/menu/item/menu-item.css.js +1 -1
- package/dist/menu/root/menu-root.css.js +1 -1
- package/dist/menu/root/menu-root.d.ts +19 -1
- package/dist/menu/root/menu-root.js +4 -0
- package/dist/menu/section/menu-section.css.js +1 -1
- package/dist/meter/index.d.ts +1 -0
- package/dist/meter/index.js +1 -0
- package/dist/meter/root/meter-root.css.js +1 -1
- package/dist/meter/segment/meter-segment.css.d.ts +1 -0
- package/dist/meter/segment/meter-segment.css.js +2 -0
- package/dist/meter/segment/meter-segment.d.ts +39 -0
- package/dist/meter/segment/meter-segment.js +11 -0
- package/dist/popover/root/popover-root.css.js +1 -1
- package/dist/popover/root/popover-root.d.ts +20 -2
- package/dist/popover/root/popover-root.js +3 -0
- package/dist/radio/root/radio-root.css.js +1 -1
- package/dist/scroll-area/root/scroll-area-root.css.js +1 -1
- package/dist/scroll-area/root/scroll-area-root.d.ts +14 -2
- package/dist/scroll-area/root/scroll-area-root.js +29 -0
- package/dist/select/root/select-root.d.ts +1 -2
- package/dist/shared/floating/entrance.css.js +1 -1
- package/dist/skip-link/root/skip-link-root.d.ts +1 -2
- package/dist/spatial-bar-chart/root/spatial-bar-chart-root.css.js +1 -1
- package/dist/spatial-bar-chart/root/spatial-bar-chart-root.d.ts +9 -1
- package/dist/strands/renderer.d.ts +2 -0
- package/dist/strands/renderer.js +1 -0
- package/dist/strands/root/strands-root.css.js +1 -1
- package/dist/strands/root/strands-root.d.ts +14 -0
- package/dist/strands/root/strands-root.js +5 -0
- package/dist/strands/shader.d.ts +7 -1
- package/dist/strands/shader.js +11 -3
- package/dist/switch/root/switch-root.css.js +1 -1
- package/dist/tabs/root/tabs-root.css.js +1 -1
- package/dist/tabs/root/tabs-root.d.ts +36 -0
- package/dist/tabs/root/tabs-root.js +7 -0
- package/dist/tabs/tab/tab.css.js +1 -1
- package/dist/tabs/tab/tab.d.ts +2 -0
- package/dist/terminal/root/terminal-root.d.ts +1 -0
- package/dist/terminal/root/terminal-root.js +1 -0
- package/dist/time-input/root/time-input-root.d.ts +1 -2
- package/dist/toast/item/toast-item.d.ts +1 -2
- package/dist/tooltip/root/tooltip-root.css.js +1 -1
- package/dist/tour/root/tour-root.css.js +1 -1
- package/dist/tour/stop/tour-stop.d.ts +1 -2
- package/dist/tree/item/tree-item.css.js +1 -1
- package/dist/tree/root/tree-root.css.js +1 -1
- package/dist/tree/root/tree-root.d.ts +5 -1
- package/examples.json +1 -1
- package/lint.json +1 -1
- package/package.json +6 -6
- package/skills/helix/SKILL.md +2 -2
- package/types/jsx.d.ts +1828 -89
- package/types/svelte.d.ts +1 -0
- package/types/vue.d.ts +454 -26
- package/types/words.d.ts +6 -0
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import { createSheet } from '@fusion.dev/helix-core';
|
|
2
|
-
export const styles = createSheet(`:host {--_radio-size: var(--radio-size, var(--helix-size-checkbox));display: block}[part="item"] {all: unset;align-items: center;box-sizing: border-box;cursor: pointer;display: inline-flex;gap: var(--helix-space-xs)}:host([disabled]) [part="item"] {cursor: default}:host([disabled]) {opacity: 0.5}[part="box"] {background-color: var(--radio-background-color,
|
|
2
|
+
export const styles = createSheet(`:host {--_radio-size: var(--radio-size, var(--helix-size-checkbox));display: block}[part="item"] {all: unset;align-items: center;box-sizing: border-box;cursor: pointer;display: inline-flex;gap: var(--helix-space-xs)}:host([disabled]) [part="item"] {cursor: default}:host([disabled]) {opacity: 0.5}[part="box"] {background-color: var(--radio-background-color, transparent);block-size: var(--_radio-size);border: var(--helix-border-thin) solid var(--radio-border-color, var(--helix-color-foreground-subtle));border-radius: var(--helix-radii-full);display: grid;flex: 0 0 auto;inline-size: var(--_radio-size);place-items: center;transition: border-color var(--helix-duration-fast) var(--helix-easing-standard)}:host(:not([disabled])) [part="item"]:hover [part="box"] {border-color: var(--radio-border-color, var(--helix-color-foreground-muted))}:host(:state(selected)) [part="box"] {border-color: var(--radio-border-color, var(--helix-color-foreground))}[part="box"]::after {background-color: var(--radio-mark-color, var(--helix-color-foreground));block-size: calc(var(--_radio-size) * 0.4);border-radius: var(--helix-radii-full);content: "";inline-size: calc(var(--_radio-size) * 0.4);scale: 0;transition: scale var(--helix-duration-fast) var(--helix-easing-emphasized)}:host(:state(selected)) [part="box"]::after {scale: 1}:host(:state(has-indicator)) [part="box"]::after {content: none}slot[name="indicator"]::slotted(*) {block-size: var(--radio-indicator-size, calc(var(--_radio-size) * 0.75));color: var(--radio-mark-color, var(--helix-color-foreground));inline-size: var(--radio-indicator-size, calc(var(--_radio-size) * 0.75));scale: 0;transition: scale var(--helix-duration-fast) var(--helix-easing-emphasized)}:host(:state(selected)) slot[name="indicator"]::slotted(*) {scale: 1}[part="item"]:focus-visible [part="box"] {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset)}[part="label"] {color: var(--helix-color-foreground);font-family: var(--helix-font-sans);font-size: var(--helix-text-sm);font-weight: var(--helix-weight-medium);line-height: var(--helix-leading-tight)}:host(:is([separation="filled"], [separation="outlined"])) {display: block}:host(:is([separation="filled"], [separation="outlined"])) [part="item"] {align-items: start;background-color: var(--radio-card-background-color, var(--helix-color-surface));border: var(--helix-border-thin) solid var(--radio-card-border-color, var(--helix-color-border));border-radius: var(--helix-radii-sm);display: flex;gap: var(--helix-space-sm);inline-size: 100%;padding: var(--radio-card-padding, var(--helix-space-md));transition: background-color var(--helix-duration-fast) var(--helix-easing-standard), border-color var(--helix-duration-fast) var(--helix-easing-standard)}:host([separation="filled"]) [part="item"] {border-color: transparent}:host(:not([disabled]):is([separation="filled"], [separation="outlined"])) [part="item"]:hover {border-color: var(--helix-color-foreground-muted)}:host(:is([separation="filled"], [separation="outlined"]):state(selected)) [part="item"] {background-color: var(--helix-color-surface-raised);border-color: var(--helix-color-primary);box-shadow: 0 0 0 var(--helix-border-thick) var(--helix-color-primary)}:host(:is([separation="filled"], [separation="outlined"])) [part="item"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset)}:host(:is([separation="filled"], [separation="outlined"])) [part="item"]:focus-visible [part="box"] {outline: none}:host(:is([separation="filled"], [separation="outlined"])) [part="label"] {font-size: var(--helix-text-md);line-height: var(--helix-leading-normal)}:host(:is([separation="filled"], [separation="outlined"])) [part="box"] {font-size: var(--helix-text-md);line-height: var(--helix-leading-normal);margin-block-start: calc((1lh - var(--_radio-size)) / 2)}:host(:is([separation="filled"], [separation="outlined"])[hide-control]) [part="box"] {display: none}:host([variant="chip"]) [part="box"] {display: none}:host([variant="chip"]) [part="item"] {--_radio-chip-lift: 2px;align-items: center;background-color: var(--helix-color-surface-sunken);block-size: var(--radio-chip-size, var(--helix-size-control));border-radius: var(--helix-radii-full);color: var(--helix-color-foreground-muted);cursor: pointer;display: inline-flex;inline-size: var(--radio-chip-size, var(--helix-size-control));justify-content: center;padding: 0;transition: background-color var(--helix-duration-fast) var(--helix-easing-standard), box-shadow var(--helix-duration-fast) var(--helix-easing-standard), translate var(--helix-duration-fast) var(--helix-easing-standard)}:host([variant="chip"]:state(selected)) [part="item"] {background-color: var(--helix-color-surface-inverse);box-shadow: var(--helix-shadow-md);color: var(--helix-color-foreground-inverse);translate: 0 calc(var(--_radio-chip-lift) * -1)}:host(:not([disabled])[variant="chip"]) [part="item"]:hover {translate: 0 calc(var(--_radio-chip-lift) / -2)}:host([variant="chip"]) [part="item"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset)}:host([variant="chip"]) [part="label"] {clip-path: inset(50%);block-size: 1px;inline-size: 1px;overflow: hidden;position: absolute;white-space: nowrap}@media (prefers-reduced-motion: reduce) {:host([variant="chip"]) [part="item"] {transition: none}:host([variant="chip"]:state(selected)) [part="item"], :host(:not([disabled])[variant="chip"]) [part="item"]:hover {translate: none}}@media print {:host {box-shadow: none;print-color-adjust: exact}}`);
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import { createSheet } from '@fusion.dev/helix-core';
|
|
2
|
-
export const styles = createSheet(`:host {display: block;position: relative}[part="viewport"] {block-size: 100%;overflow: auto;overscroll-behavior: contain}[part="viewport"]
|
|
2
|
+
export const styles = createSheet(`:host {display: block;position: relative}[part="viewport"] {block-size: 100%;overflow: auto;overscroll-behavior: contain}[part="viewport"] {scrollbar-color: var(--scroll-area-thumb-color, var(--helix-scrollbar-thumb-color)) var(--scroll-area-track-color, var(--helix-scrollbar-track-color));scrollbar-width: var(--scroll-area-scrollbar, thin)}[part="viewport"]:hover {scrollbar-color: var(--scroll-area-thumb-hover-color, var(--helix-scrollbar-thumb-hover-color)) var(--scroll-area-track-color, var(--helix-scrollbar-track-color))}:host([scrollbars]) [part="viewport"] {scrollbar-width: none}[part~="scrollbar"] {--_scroll-area-thumb: max(var(--scroll-area-thumb-min-size, var(--helix-space-lg)), var(--scroll-area-thumb-fraction, 1) * 100%);background-color: var(--scroll-area-track-color, var(--helix-scrollbar-track-color));opacity: 0;position: absolute;touch-action: none;transition: opacity var(--helix-duration-fast) var(--helix-easing-standard);user-select: none;z-index: calc(var(--helix-layer-raised) + 1)}[part~="scrollbar-visible"] {opacity: 1}[part~="scrollbar-vertical"] {inline-size: var(--scroll-area-scrollbar-size, var(--helix-space-sm));inset-block: 0;inset-inline-end: 0}[part~="scrollbar-horizontal"] {block-size: var(--scroll-area-scrollbar-size, var(--helix-space-sm));inset-block-end: 0;inset-inline: 0}:host(:state(scrollbar-horizontal)) [part~="scrollbar-vertical"] {inset-block-end: var(--scroll-area-scrollbar-size, var(--helix-space-sm))}:host(:state(scrollbar-vertical)) [part~="scrollbar-horizontal"] {inset-inline-end: var(--scroll-area-scrollbar-size, var(--helix-space-sm))}[part~="thumb"] {background-color: var(--scroll-area-thumb-color, var(--helix-scrollbar-thumb-color));border-radius: var(--helix-radii-full);position: absolute}[part~="thumb"]:hover {background-color: var(--scroll-area-thumb-hover-color, var(--helix-scrollbar-thumb-hover-color))}[part~="thumb-vertical"] {block-size: var(--_scroll-area-thumb);inset-block-start: calc(var(--scroll-area-scroll-fraction, 0) * (100% - var(--_scroll-area-thumb)));inset-inline: var(--helix-border-thick)}[part~="thumb-horizontal"] {inline-size: var(--_scroll-area-thumb);inset-block: var(--helix-border-thick);inset-inline-start: calc(var(--scroll-area-scroll-fraction, 0) * (100% - var(--_scroll-area-thumb)))}[part="corner"] {background-color: var(--scroll-area-track-color, var(--helix-scrollbar-track-color));block-size: var(--scroll-area-scrollbar-size, var(--helix-space-sm));inline-size: var(--scroll-area-scrollbar-size, var(--helix-space-sm));inset-block-end: 0;inset-inline-end: 0;position: absolute}[part="viewport"], [part="edges"] {--_scroll-area-from-start: to right;--_scroll-area-from-end: to left}:host(:dir(rtl)) [part="viewport"], :host(:dir(rtl)) [part="edges"] {--_scroll-area-from-start: to left;--_scroll-area-from-end: to right}[part="viewport"] {--_scroll-area-content-size: calc(100% - var(--scroll-area-gutter-inline-end, 0px)) calc(100% - var(--scroll-area-gutter-block-end, 0px));mask-composite: add, add, intersect, add;mask-position: right top, left bottom, left top, left top;mask-repeat: no-repeat;mask-size: var(--scroll-area-gutter-inline-end, 0px) 100%, 100% var(--scroll-area-gutter-block-end, 0px), var(--_scroll-area-content-size), var(--_scroll-area-content-size);transition: --_scroll-area-depth-block-start var(--helix-duration-fast) var(--helix-easing-standard), --_scroll-area-depth-block-end var(--helix-duration-fast) var(--helix-easing-standard), --_scroll-area-depth-inline-start var(--helix-duration-fast) var(--helix-easing-standard), --_scroll-area-depth-inline-end var(--helix-duration-fast) var(--helix-easing-standard)}:host(:dir(rtl)) [part="viewport"] {mask-position: left top, left bottom, right top, right top}:host(:state(more-block-start)) [part="viewport"] {--_scroll-area-depth-block-start: var(--scroll-area-fade-block-start, var(--scroll-area-fade, var(--helix-space-xl)))}:host(:state(more-block-end)) [part="viewport"] {--_scroll-area-depth-block-end: var(--scroll-area-fade-block-end, var(--scroll-area-fade, var(--helix-space-xl)))}:host(:state(more-inline-start)) [part="viewport"] {--_scroll-area-depth-inline-start: var(--scroll-area-fade-inline-start, var(--scroll-area-fade, var(--helix-space-xl)))}:host(:state(more-inline-end)) [part="viewport"] {--_scroll-area-depth-inline-end: var(--scroll-area-fade-inline-end, var(--scroll-area-fade, var(--helix-space-xl)))}:host(:state(scrolls)) [part="viewport"] {-webkit-mask-image: var(--scroll-area-fade-color, linear-gradient(#000 0 0)), linear-gradient(#000 0 0), linear-gradient(var(--_scroll-area-from-start), transparent 0, #000 var(--_scroll-area-depth-inline-start, 0px), #000 calc(100% - var(--_scroll-area-depth-inline-end, 0px)), transparent 100%), linear-gradient(to bottom, transparent 0, #000 var(--_scroll-area-depth-block-start, 0px), #000 calc(100% - var(--_scroll-area-depth-block-end, 0px)), transparent 100%);mask-image: var(--scroll-area-fade-color, linear-gradient(#000 0 0)), linear-gradient(#000 0 0), linear-gradient(var(--_scroll-area-from-start), transparent 0, #000 var(--_scroll-area-depth-inline-start, 0px), #000 calc(100% - var(--_scroll-area-depth-inline-end, 0px)), transparent 100%), linear-gradient(to bottom, transparent 0, #000 var(--_scroll-area-depth-block-start, 0px), #000 calc(100% - var(--_scroll-area-depth-block-end, 0px)), transparent 100%)}:host::before, :host::after {content: "";opacity: 0;pointer-events: none;position: absolute;transition: opacity var(--helix-duration-fast) var(--helix-easing-standard);z-index: var(--helix-layer-raised)}:host::before {background: linear-gradient(to bottom, var(--scroll-area-fade-color), transparent);block-size: var(--scroll-area-fade-block-start, var(--scroll-area-fade, var(--helix-space-xl)));inset-block-start: 0;inset-inline: 0}:host::after {background: linear-gradient(to top, var(--scroll-area-fade-color), transparent);block-size: var(--scroll-area-fade-block-end, var(--scroll-area-fade, var(--helix-space-xl)));inset-block-end: 0;inset-inline: 0}:host(:state(more-block-start))::before, :host(:state(more-block-end))::after {opacity: 1}[part="edges"] {inset: 0;pointer-events: none;position: absolute}[part="edges"]::before, [part="edges"]::after {content: "";inset-block: 0;opacity: 0;position: absolute;transition: opacity var(--helix-duration-fast) var(--helix-easing-standard);z-index: var(--helix-layer-raised)}[part="edges"]::before {background: linear-gradient(var(--_scroll-area-from-start), var(--scroll-area-fade-color), transparent);inline-size: var(--scroll-area-fade-inline-start, var(--scroll-area-fade, var(--helix-space-xl)));inset-inline-start: 0}[part="edges"]::after {background: linear-gradient(var(--_scroll-area-from-end), var(--scroll-area-fade-color), transparent);inline-size: var(--scroll-area-fade-inline-end, var(--scroll-area-fade, var(--helix-space-xl)));inset-inline-end: 0}:host(:state(more-inline-start)) [part="edges"]::before, :host(:state(more-inline-end)) [part="edges"]::after {opacity: 1}[part="viewport"]:focus-visible ~ [part="edges"] {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: calc(var(--helix-size-focus-offset) * -1)}@media (prefers-reduced-motion: reduce) {:host::before, :host::after, [part="edges"]::before, [part="edges"]::after, [part="viewport"], [part~="scrollbar"] {transition: none}}@media print {:host {overflow: visible}}`);
|
|
@@ -8,6 +8,17 @@ import type { CSSResultGroup } from 'lit';
|
|
|
8
8
|
* styled to match the design system. The base class measures which edges have
|
|
9
9
|
* content past them.
|
|
10
10
|
*
|
|
11
|
+
* **The content fades out toward each edge that has more past it.** The fade
|
|
12
|
+
* is a mask on the viewport, so the surface behind the scroll area shows
|
|
13
|
+
* through it: the page, a card, or a translucent pane. Set the depth with
|
|
14
|
+
* `--scroll-area-fade`, or one edge's depth with its own property, and use `0`
|
|
15
|
+
* to keep an edge from fading. A scrollbar that takes room beside the content
|
|
16
|
+
* stays out of the mask.
|
|
17
|
+
*
|
|
18
|
+
* **Set `--scroll-area-fade-color` to paint the fades.** Each fade is then a
|
|
19
|
+
* gradient from that color over the content, and there is no mask. Use it for
|
|
20
|
+
* a scroll area on a solid ground, in the ground's color or one of your own.
|
|
21
|
+
*
|
|
11
22
|
* Under `scrollbars`, the browser's scrollbar is hidden and the component's own
|
|
12
23
|
* are drawn over the content at the edge, in the same colors.
|
|
13
24
|
*
|
|
@@ -17,10 +28,10 @@ import type { CSSResultGroup } from 'lit';
|
|
|
17
28
|
* @aliases Scroller, Overflow, Scroll container
|
|
18
29
|
* @documentation https://fusion.dev/helix/components/scroll-area
|
|
19
30
|
*
|
|
20
|
-
* @cssproperty --scroll-area-fade - The depth of the
|
|
31
|
+
* @cssproperty --scroll-area-fade - The depth of the fade at each edge.
|
|
21
32
|
* @cssproperty --scroll-area-fade-block-end - The depth of the bottom fade, or `0` to remove it.
|
|
22
33
|
* @cssproperty --scroll-area-fade-block-start - The depth of the top fade, or `0` to remove it.
|
|
23
|
-
* @cssproperty --scroll-area-fade-color - The color the fades
|
|
34
|
+
* @cssproperty --scroll-area-fade-color - The color to paint the fades in, as a gradient over the content at each edge. Unset, the fades are a mask.
|
|
24
35
|
* @cssproperty --scroll-area-fade-inline-end - The depth of the fade at the inline end, or `0` to remove it.
|
|
25
36
|
* @cssproperty --scroll-area-fade-inline-start - The depth of the fade at the inline start, or `0` to remove it.
|
|
26
37
|
* @cssproperty --scroll-area-scrollbar - The scrollbar width, as a `scrollbar-width` keyword.
|
|
@@ -32,6 +43,7 @@ import type { CSSResultGroup } from 'lit';
|
|
|
32
43
|
*/
|
|
33
44
|
export declare class HelixScrollArea extends HelixHeadlessScrollArea {
|
|
34
45
|
static styles: CSSResultGroup;
|
|
46
|
+
connectedCallback(): void;
|
|
35
47
|
}
|
|
36
48
|
declare global {
|
|
37
49
|
interface HTMLElementTagNameMap {
|
|
@@ -2,8 +2,37 @@ import { __decorate } from "tslib";
|
|
|
2
2
|
import { customElement } from '@fusion.dev/helix-core';
|
|
3
3
|
import { HelixHeadlessScrollArea } from '@fusion.dev/helix-headless/scroll-area';
|
|
4
4
|
import { styles } from './scroll-area-root.css.js';
|
|
5
|
+
const DEPTHS = [
|
|
6
|
+
'--_scroll-area-depth-block-end',
|
|
7
|
+
'--_scroll-area-depth-block-start',
|
|
8
|
+
'--_scroll-area-depth-inline-end',
|
|
9
|
+
'--_scroll-area-depth-inline-start',
|
|
10
|
+
];
|
|
11
|
+
let registered = false;
|
|
12
|
+
function registerDepths() {
|
|
13
|
+
if (registered || typeof CSS === 'undefined' || !('registerProperty' in CSS)) {
|
|
14
|
+
return;
|
|
15
|
+
}
|
|
16
|
+
registered = true;
|
|
17
|
+
for (const name of DEPTHS) {
|
|
18
|
+
try {
|
|
19
|
+
CSS.registerProperty({
|
|
20
|
+
inherits: false,
|
|
21
|
+
initialValue: '0px',
|
|
22
|
+
name,
|
|
23
|
+
syntax: '<length-percentage>',
|
|
24
|
+
});
|
|
25
|
+
}
|
|
26
|
+
catch {
|
|
27
|
+
}
|
|
28
|
+
}
|
|
29
|
+
}
|
|
5
30
|
let HelixScrollArea = class HelixScrollArea extends HelixHeadlessScrollArea {
|
|
6
31
|
static { this.styles = styles; }
|
|
32
|
+
connectedCallback() {
|
|
33
|
+
super.connectedCallback();
|
|
34
|
+
registerDepths();
|
|
35
|
+
}
|
|
7
36
|
};
|
|
8
37
|
HelixScrollArea = __decorate([
|
|
9
38
|
customElement('helix-scroll-area')
|
|
@@ -20,8 +20,7 @@ import '../../listbox/index.js';
|
|
|
20
20
|
*
|
|
21
21
|
* @cssproperty --select-border-color - Color of the panel's edge.
|
|
22
22
|
* @cssproperty --select-border-width - Width of the panel's edge. Defaults to
|
|
23
|
-
* `--helix-border-floating`,
|
|
24
|
-
* your theme sets a width.
|
|
23
|
+
* `--helix-border-floating`, a hairline, so the panel has an edge as well as its shadow over a dark page. Set it to `0` for the shadow alone.
|
|
25
24
|
* @cssproperty --select-shadow - Shadow under the panel. Defaults to
|
|
26
25
|
* `--helix-shadow-floating`, because the panel can sit over any content.
|
|
27
26
|
* @cssproperty --select-surface-max-block-size - Maximum height of the panel.
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import { createSheet } from '@fusion.dev/helix-core';
|
|
2
|
-
export const styles = createSheet(`[part="surface"] {--_travel: calc(var(--helix-space-2xs) * -1);opacity: 0;scale: 0.96;transform: translateY(var(--_travel));transition: opacity var(--helix-duration-fast) var(--helix-easing-standard), scale var(--helix-duration-fast) var(--helix-easing-emphasized), transform var(--helix-duration-fast) var(--helix-easing-emphasized), display var(--helix-duration-fast) allow-discrete, overlay var(--helix-duration-fast) allow-discrete}[part="surface"][data-placement^="top"] {--_travel: var(--helix-space-2xs);transform-origin: var(--floating-arrow-x, 50%) 100%}[part="surface"][data-placement^="bottom"] {transform-origin: var(--floating-arrow-x, 50%) 0}[part="surface"][data-placed] {opacity: 1;scale: 1;transform: none}@media (prefers-reduced-motion: reduce) {[part="surface"], [part="surface"][data-placed] {scale: 1;transform: none;transition: none}}`);
|
|
2
|
+
export const styles = createSheet(`[part="surface"] {--_travel: calc(var(--helix-space-2xs) * -1);opacity: 0;scale: 0.96;transform: translateY(var(--_travel));transition: opacity var(--helix-duration-fast) var(--helix-easing-standard), scale var(--helix-duration-fast) var(--helix-easing-emphasized), transform var(--helix-duration-fast) var(--helix-easing-emphasized), display var(--helix-duration-fast) allow-discrete, overlay var(--helix-duration-fast) allow-discrete}[part="surface"][data-placement^="top"] {--_travel: var(--helix-space-2xs);transform-origin: var(--floating-arrow-x, 50%) 100%}[part="surface"][data-placement^="bottom"] {transform-origin: var(--floating-arrow-x, 50%) 0}[part="surface"][data-placed] {opacity: 1;scale: 1;transform: none}@media (prefers-reduced-motion: reduce) {[part="surface"], [part="surface"][data-placed] {scale: 1;transform: none;transition: none}}@supports not (overlay: auto) {[part="surface"] {transition-behavior: normal}}`);
|
|
@@ -25,8 +25,7 @@ import type { CSSResultGroup } from 'lit';
|
|
|
25
25
|
* @cssproperty --skip-link-background-color - The background of the link while it is shown.
|
|
26
26
|
* @cssproperty --skip-link-border-color - The border color of the link while it is shown.
|
|
27
27
|
* @cssproperty --skip-link-border-width - The border width of the link while it is shown. Follows
|
|
28
|
-
* `--helix-border-floating`,
|
|
29
|
-
* theme sets a border.
|
|
28
|
+
* `--helix-border-floating`, a hairline. Set it to `0` for the shadow alone.
|
|
30
29
|
* @cssproperty --skip-link-color - The text color of the link while it is shown.
|
|
31
30
|
* @cssproperty --skip-link-font-size - The size of the link's text.
|
|
32
31
|
* @cssproperty --skip-link-inset-block - How far the shown link sits from the top of the viewport.
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import { createSheet } from '@fusion.dev/helix-core';
|
|
2
|
-
export const styles = createSheet(`:host {display: block}[part="plot"] {background-color: var(--helix-color-surface-sunken);aspect-ratio: 4 / 3;block-size: var(--spatial-bar-chart-block-size, auto);inline-size: 100%;max-block-size: var(--spatial-bar-chart-block-size, 22em);border-radius: var(--helix-radii-md);overflow: hidden;position: relative}::slotted(*) {inset: 0;position: absolute}:host([no-box]) [part="plot"] {background-color: transparent}[part="plot"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset)}[part="fallback"] {inset: var(--helix-space-md);position: absolute}[part="fallback"][hidden] {display: none}[part="drawing"] {block-size: 100%;display: block;font-family: var(--helix-font-sans);inline-size: 100%;overflow: visible;touch-action: pan-y;user-select: none}[part="grid"] {fill: none;opacity: 0.35;stroke: var(--helix-color-foreground-muted);stroke-width: var(--helix-border-thin);vector-effect: non-scaling-stroke}[part="tick"] {fill: var(--helix-color-foreground-muted);font-weight: var(--helix-weight-medium)}[part="axis-name"] {fill: var(--helix-color-foreground);font-weight: var(--helix-weight-semibold)}[part~="bar"] {--_spatial-bar-chart-color: var(--chart-series, var(--helix-color-primary))}[part="face"] {--_spatial-bar-chart-face: oklch(from var(--_spatial-bar-chart-color) calc(l - var(--spatial-bar-chart-shade, 0) * 0.5) c h);--_spatial-bar-chart-edge: oklch(from var(--_spatial-bar-chart-face) calc(l + clamp(-0.08, (0.6 - l) * 1000, 0.1)) c h);fill: var(--_spatial-bar-chart-fill, var(--_spatial-bar-chart-face));fill-opacity: calc(var(--_spatial-bar-chart-area, 1) * var(--_spatial-bar-chart-through, 1));stroke: var(--_spatial-bar-chart-line, var(--_spatial-bar-chart-edge));stroke-linejoin: round;stroke-opacity: var(--_spatial-bar-chart-through, 1);stroke-width: var(--helix-border-thin);vector-effect: non-scaling-stroke}:host([emphasis="outlined"]) [part="face"] {--_spatial-bar-chart-fill: color-mix(in oklab, var(--_spatial-bar-chart-face) 60%, var(--helix-color-background));--_spatial-bar-chart-line: var(--_spatial-bar-chart-color)}:host([emphasis="subtle"]) [part="face"] {--_spatial-bar-chart-area: 0.2;--_spatial-bar-chart-line: var(--_spatial-bar-chart-color)}:host([material="glass"]) {--_spatial-bar-chart-through: calc(0.62 * var(--helix-material-opacity))}:host([material="frosted"]) {--_spatial-bar-chart-through: calc(0.88 * var(--helix-material-opacity))}foreignObject > [part="mark"] {translate: -50% -50%}[part="ring"] {fill: none;pointer-events: none;stroke: var(--helix-color-foreground);stroke-width: var(--helix-border-thick);vector-effect: non-scaling-stroke}[part="ring-behind"] {fill: none;opacity: 0.6;pointer-events: none;stroke: var(--helix-color-foreground);stroke-dasharray: 3px 2px;stroke-width: var(--helix-border-thin);vector-effect: non-scaling-stroke}[part="live"], [part="summary"], [part="table"] {block-size: 1px;clip-path: inset(50%);inline-size: 1px;margin: var(--helix-space-none);overflow: hidden;position: absolute;white-space: nowrap}[part="empty"], [part="loading"] {color: var(--helix-color-foreground-muted);font-family: var(--helix-font-sans);font-size: var(--helix-text-sm);margin: var(--helix-space-none);text-align: center}@media print {[part="face"] {stroke: var(--helix-color-border)}}@media (forced-colors: active) {[part="face"] {forced-color-adjust: none;stroke: CanvasText}[part="grid"] {stroke: CanvasText}[part="tick"], [part="axis-name"] {fill: CanvasText}[part="ring"], [part="ring-behind"] {stroke: Highlight}}`);
|
|
2
|
+
export const styles = createSheet(`:host {display: block}:host {--spatial-bar-chart-tone-accent: var(--helix-color-accent);--spatial-bar-chart-tone-danger: var(--helix-color-danger);--spatial-bar-chart-tone-info: var(--helix-color-info);--spatial-bar-chart-tone-muted: var(--helix-color-foreground-subtle);--spatial-bar-chart-tone-primary: var(--helix-color-primary);--spatial-bar-chart-tone-success: var(--helix-color-success);--spatial-bar-chart-tone-warning: var(--helix-color-warning)}[part="plot"] {background-color: var(--helix-color-surface-sunken);aspect-ratio: 4 / 3;block-size: var(--spatial-bar-chart-block-size, auto);inline-size: 100%;max-block-size: var(--spatial-bar-chart-block-size, 22em);border-radius: var(--helix-radii-md);overflow: hidden;position: relative}::slotted(*) {inset: 0;position: absolute}:host([no-box]) [part="plot"], :host([variant="row"]) [part="plot"], :host([variant="diagonal"]) [part="plot"] {background-color: transparent}[part="plot"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset)}[part="fallback"] {font-size: var(--helix-text-xs);inset: var(--helix-space-md);position: absolute}:host([variant]) [part="fallback"] {column-gap: var(--spatial-bar-chart-bar-size, normal)}[part="fallback"][hidden] {display: none}[part="drawing"] {block-size: 100%;display: block;font-family: var(--helix-font-sans);inline-size: 100%;overflow: visible;touch-action: pan-y;user-select: none}[part="grid"] {fill: none;opacity: 0.35;stroke: var(--helix-color-foreground-muted);stroke-width: var(--helix-border-thin);vector-effect: non-scaling-stroke}[part="tick"] {fill: var(--helix-color-foreground-muted);font-weight: var(--helix-weight-medium)}[part="axis-name"] {fill: var(--helix-color-foreground);font-weight: var(--helix-weight-semibold)}[part="floor"] {fill: none;stroke: var(--helix-color-border);stroke-linejoin: round;stroke-width: var(--helix-border-thin);vector-effect: non-scaling-stroke}[part="tick"][data-tone] {fill: var(--chart-series, var(--helix-color-foreground-muted))}[part="value"] {fill: var(--helix-color-foreground);font-variant-numeric: tabular-nums;font-weight: var(--helix-weight-semibold)}[part~="bar"] {--_spatial-bar-chart-color: var(--chart-series, var(--helix-color-primary))}[part="face"] {--_spatial-bar-chart-face: oklch(from var(--_spatial-bar-chart-color) calc(l - var(--spatial-bar-chart-shade, 0) * 0.5) c h);--_spatial-bar-chart-edge: oklch(from var(--_spatial-bar-chart-face) calc(l + clamp(-0.08, (0.6 - l) * 1000, 0.1)) c h);fill: var(--_spatial-bar-chart-fill, var(--_spatial-bar-chart-face));fill-opacity: calc(var(--_spatial-bar-chart-area, 1) * var(--_spatial-bar-chart-through, 1));stroke: var(--_spatial-bar-chart-line, var(--_spatial-bar-chart-edge));stroke-linejoin: round;stroke-opacity: var(--_spatial-bar-chart-through, 1);stroke-width: var(--helix-border-thin);vector-effect: non-scaling-stroke}:host([emphasis="outlined"]) [part="face"] {--_spatial-bar-chart-fill: color-mix(in oklab, var(--_spatial-bar-chart-face) 60%, var(--helix-color-background));--_spatial-bar-chart-line: var(--_spatial-bar-chart-color)}:host([emphasis="subtle"]) [part="face"] {--_spatial-bar-chart-area: 0.2;--_spatial-bar-chart-line: var(--_spatial-bar-chart-color)}:host([emphasis="muted"]) [part="face"] {--_spatial-bar-chart-fill: color-mix(in oklab, var(--helix-color-foreground) calc(30% - var(--spatial-bar-chart-shade, 0) * 66%), var(--helix-color-surface));--_spatial-bar-chart-line: color-mix(in oklab, var(--helix-color-foreground) 10%, transparent)}:host([emphasis="muted"]) [part~="bar"][data-tone] [part="face"] {--_spatial-bar-chart-fill: color-mix(in oklab, var(--_spatial-bar-chart-color) calc(100% - var(--spatial-bar-chart-shade, 0) * 130%), var(--helix-color-surface))}:host([emphasis="muted"]) [part="glow"] {fill: color-mix(in oklab, var(--chart-series, var(--helix-color-primary)) 40%, transparent)}:host([material="glass"]) {--_spatial-bar-chart-through: calc(0.62 * var(--helix-material-opacity))}:host([material="frosted"]) {--_spatial-bar-chart-through: calc(0.88 * var(--helix-material-opacity))}foreignObject > [part="mark"] {block-size: calc(var(--helix-border-thin) / 50);inline-size: calc(var(--helix-border-thin) / 50);translate: -50% -50%}[part="ring"] {fill: none;pointer-events: none;stroke: var(--helix-color-foreground);stroke-width: var(--helix-border-thick);vector-effect: non-scaling-stroke}[part="ring-behind"] {fill: none;opacity: 0.6;pointer-events: none;stroke: var(--helix-color-foreground);stroke-dasharray: 3px 2px;stroke-width: var(--helix-border-thin);vector-effect: non-scaling-stroke}[part="live"], [part="summary"], [part="table"] {block-size: 1px;clip-path: inset(50%);inline-size: 1px;margin: var(--helix-space-none);overflow: hidden;position: absolute;white-space: nowrap}[part="empty"], [part="loading"] {color: var(--helix-color-foreground-muted);font-family: var(--helix-font-sans);font-size: var(--helix-text-sm);margin: var(--helix-space-none);text-align: center}@media print {[part="face"] {stroke: var(--helix-color-border)}}@media (forced-colors: active) {[part="face"] {forced-color-adjust: none;stroke: CanvasText}[part="grid"], [part="floor"] {stroke: CanvasText}[part="tick"], [part="axis-name"], [part="value"] {fill: CanvasText}[part="ring"], [part="ring-behind"] {stroke: Highlight}[part="glow"] {display: none}}`);
|
|
@@ -16,6 +16,7 @@ import '../../tooltip/index.js';
|
|
|
16
16
|
* @groups charts
|
|
17
17
|
* @documentation https://fusion.dev/helix/components/spatial-bar-chart
|
|
18
18
|
*
|
|
19
|
+
* @cssproperty --spatial-bar-chart-bar-size - How wide each bar of a `row` or a `diagonal` stands on the page, whatever the number of bars: the row is as long as its bars make it, centered in the plot, and the tallest bar stands as high as the plot has room for, and no taller than the row is long and a quarter again, so one bar stands as a block. `fits` says how many bars the plot holds. Unset, the row fills the plot's width.
|
|
19
20
|
* @cssproperty --spatial-bar-chart-block-size - How tall the plot is. By default, three quarters of its width and 22em at most.
|
|
20
21
|
*/
|
|
21
22
|
export declare class HelixSpatialBarChart extends HelixHeadlessSpatialBarChart {
|
|
@@ -30,11 +31,18 @@ export declare class HelixSpatialBarChart extends HelixHeadlessSpatialBarChart {
|
|
|
30
31
|
* reflected property takes no default, and `solid` writes it out. A
|
|
31
32
|
* renderer draws the bars the same way.
|
|
32
33
|
*
|
|
34
|
+
* **`muted` draws every bar in the neutral ink**, so the one bar whose cell
|
|
35
|
+
* names a tone, such as `data-tone="primary"`, is the bar in color, with a
|
|
36
|
+
* soft glow in its tone: one reading lit among the others, such as today
|
|
37
|
+
* among a week. Each top takes the most ink and each side less, as a
|
|
38
|
+
* colored bar's faces do. A renderer draws the neutral bars and the toned
|
|
39
|
+
* one, without the glow.
|
|
40
|
+
*
|
|
33
41
|
* It composes with `material`: emphasis decides what is drawn, and material
|
|
34
42
|
* how much of it comes through. The outline on the bar the keys rest on
|
|
35
43
|
* keeps its own ink.
|
|
36
44
|
*/
|
|
37
|
-
emphasis?: 'outlined' | 'solid' | 'subtle';
|
|
45
|
+
emphasis?: 'muted' | 'outlined' | 'solid' | 'subtle';
|
|
38
46
|
/**
|
|
39
47
|
* How much of each mark comes through, as on every chart: `glass` admits the
|
|
40
48
|
* most of what is behind it, `frosted` less, and absent is opaque. The
|
|
@@ -13,6 +13,8 @@ export declare const MAX_DUST: number;
|
|
|
13
13
|
export interface StrandsFrame {
|
|
14
14
|
/** How much the glow around the strands adds, as a multiplier. */
|
|
15
15
|
bloom: number;
|
|
16
|
+
/** Whether the light is drawn alone, with no ground under it, so what is behind shows. */
|
|
17
|
+
clear: boolean;
|
|
16
18
|
/** How far apart the brightest and dimmest strands are, from `0` to `1`. */
|
|
17
19
|
contrast: number;
|
|
18
20
|
/** How many of the path's points are in use. */
|
package/dist/strands/renderer.js
CHANGED
|
@@ -116,6 +116,7 @@ export class StrandsRenderer {
|
|
|
116
116
|
this.vec3(this.composite, 'uGround', palette.ground);
|
|
117
117
|
this.vec3(this.composite, 'uInk', palette.peak);
|
|
118
118
|
this.float(this.composite, 'uLight', palette.light ? 1 : 0);
|
|
119
|
+
this.float(this.composite, 'uClear', frame.clear ? 1 : 0);
|
|
119
120
|
this.float(this.composite, 'uGain', (GAIN * frame.gain) / this.scale);
|
|
120
121
|
this.float(this.composite, 'uBloom', BLOOM * frame.bloom);
|
|
121
122
|
gl.bindVertexArray(this.empty);
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import { createSheet } from '@fusion.dev/helix-core';
|
|
2
|
-
export const styles = createSheet(`:host {--_strands-glow: var(--strands-glow, var(--helix-color-primary));--_strands-ground: var(--strands-ground, var(--helix-color-background));--_strands-tint: var(--strands-tint, var(--helix-color-accent));position: relative;display: block;inline-size: 100%;block-size: 100%;background-image: linear-gradient(115deg, var(--_strands-ground) 20%, color-mix(in oklab, var(--_strands-glow) 22%, var(--_strands-ground)) 48%, color-mix(in oklab, var(--_strands-tint) 12%, var(--_strands-ground)) 58%, var(--_strands-ground) 82%);pointer-events: none}:host([travel]) {block-size: auto;inline-size: auto;inset: 0;position: fixed;z-index: var(--helix-layer-beneath)}[part="canvas"] {display: block;inline-size: 100%;block-size: 100%;caret-color: var(--strands-peak, var(--helix-color-primary-hover));color: var(--_strands-glow);column-rule-color: var(--strands-peak, var(--helix-color-primary-active));outline-color: var(--_strands-ground);text-decoration-color: var(--_strands-tint);transition-duration: var(--helix-duration-fast);transition-property: caret-color, color, column-rule-color, outline-color, text-decoration-color}[part="content"] {inset: 0;pointer-events: none;position: absolute}::slotted(*) {pointer-events: auto}[part="canvas"][hidden] {display: none}@media print {:host {display: none}}`);
|
|
2
|
+
export const styles = createSheet(`:host {--_strands-glow: var(--strands-glow, var(--helix-color-primary));--_strands-ground: var(--strands-ground, var(--helix-color-background));--_strands-tint: var(--strands-tint, var(--helix-color-accent));position: relative;display: block;inline-size: 100%;block-size: 100%;background-image: linear-gradient(115deg, var(--_strands-ground) 20%, color-mix(in oklab, var(--_strands-glow) 22%, var(--_strands-ground)) 48%, color-mix(in oklab, var(--_strands-tint) 12%, var(--_strands-ground)) 58%, var(--_strands-ground) 82%);pointer-events: none}:host([clear]) {background-image: none}:host([clear]:state(fallback)) {background-image: linear-gradient(115deg, transparent 20%, color-mix(in oklab, var(--_strands-glow) 22%, transparent) 48%, color-mix(in oklab, var(--_strands-tint) 12%, transparent) 58%, transparent 82%)}:host([travel]) {block-size: auto;inline-size: auto;inset: 0;position: fixed;z-index: var(--helix-layer-beneath)}[part="canvas"] {display: block;inline-size: 100%;block-size: 100%;caret-color: var(--strands-peak, var(--helix-color-primary-hover));color: var(--_strands-glow);column-rule-color: var(--strands-peak, var(--helix-color-primary-active));outline-color: var(--_strands-ground);text-decoration-color: var(--_strands-tint);transition-duration: var(--helix-duration-fast);transition-property: caret-color, color, column-rule-color, outline-color, text-decoration-color}[part="content"] {inset: 0;pointer-events: none;position: absolute}::slotted(*) {pointer-events: auto}[part="canvas"][hidden] {display: none}@media print {:host {display: none}}`);
|
|
@@ -21,6 +21,10 @@ import { type StrandsVariant } from '../path.js';
|
|
|
21
21
|
* `at` is nearer, and crosses in one diagonal to the far side. `waves` is sharp
|
|
22
22
|
* strands crossing the full width.
|
|
23
23
|
*
|
|
24
|
+
* **Clear, over glass.** Set `clear` and the ribbon is drawn without its
|
|
25
|
+
* ground, so a translucent pane or a frosted window behind the element shows
|
|
26
|
+
* through, with the light over it.
|
|
27
|
+
*
|
|
24
28
|
* **Quiet behind words.** `quiet` names elements, such as a hero's words, that
|
|
25
29
|
* the light dims behind to a faint glow, so a bright ribbon can cross the page
|
|
26
30
|
* under them and they stay crisp.
|
|
@@ -90,6 +94,16 @@ export declare class HelixStrands extends HelixElement {
|
|
|
90
94
|
* strands alone, crisp and dimmer, and `1` is the default glow.
|
|
91
95
|
*/
|
|
92
96
|
bloom: number;
|
|
97
|
+
/**
|
|
98
|
+
* Whether the light is drawn alone, without the ground under it, so what is
|
|
99
|
+
* behind the element shows through, such as a translucent pane or a window's
|
|
100
|
+
* glass. The ground still says which way the page runs: light added on a
|
|
101
|
+
* dark one, ink on a light one.
|
|
102
|
+
*
|
|
103
|
+
* Reflected because the stylesheet selects on it: the band under the canvas
|
|
104
|
+
* shows only while the element falls back, and loses its ground too.
|
|
105
|
+
*/
|
|
106
|
+
clear: boolean;
|
|
93
107
|
/**
|
|
94
108
|
* How far apart the brightest and dimmest strands are, from `0`, most of
|
|
95
109
|
* them alike, to `1`, a few burning bright over many faint ones. Clamped to
|
|
@@ -15,6 +15,7 @@ let HelixStrands = class HelixStrands extends HelixElement {
|
|
|
15
15
|
constructor() {
|
|
16
16
|
super(...arguments);
|
|
17
17
|
this.bloom = 1;
|
|
18
|
+
this.clear = false;
|
|
18
19
|
this.contrast = 1;
|
|
19
20
|
this.density = 0.8;
|
|
20
21
|
this.depth = 1;
|
|
@@ -396,6 +397,7 @@ let HelixStrands = class HelixStrands extends HelixElement {
|
|
|
396
397
|
const share = (value) => Math.min(1, Math.max(0, value));
|
|
397
398
|
renderer.render({
|
|
398
399
|
bloom: Math.max(0, this.bloom),
|
|
400
|
+
clear: this.clear,
|
|
399
401
|
contrast: share(this.contrast),
|
|
400
402
|
count: this.count,
|
|
401
403
|
depth: share(this.depth),
|
|
@@ -475,6 +477,9 @@ __decorate([
|
|
|
475
477
|
__decorate([
|
|
476
478
|
property({ converter: numberConverter('bloom', 1) })
|
|
477
479
|
], HelixStrands.prototype, "bloom", void 0);
|
|
480
|
+
__decorate([
|
|
481
|
+
property({ reflect: true, type: Boolean })
|
|
482
|
+
], HelixStrands.prototype, "clear", void 0);
|
|
478
483
|
__decorate([
|
|
479
484
|
property({ converter: numberConverter('contrast', 1) })
|
|
480
485
|
], HelixStrands.prototype, "contrast", void 0);
|
package/dist/strands/shader.d.ts
CHANGED
|
@@ -20,5 +20,11 @@ export declare const BLUR_FRAGMENT = "#version 300 es\nprecision highp float;\ni
|
|
|
20
20
|
* the peak rather than clipping. On a light page added light is invisible, so
|
|
21
21
|
* the same energy darkens the ground toward the peak as ink. A step of noise
|
|
22
22
|
* under a code value hides the banding a slow gradient shows on eight bits.
|
|
23
|
+
*
|
|
24
|
+
* **Clear, the light is drawn without the ground**, premultiplied, so the
|
|
25
|
+
* canvas composites over whatever is behind it. On a dark page it is the light
|
|
26
|
+
* over black, as much as its brightest channel covers; on a light page, the
|
|
27
|
+
* ink as much as it darkens. Over the ground it was meant for, it reads as the
|
|
28
|
+
* ground-drawn ribbon does.
|
|
23
29
|
*/
|
|
24
|
-
export declare const COMPOSITE_FRAGMENT = "#version 300 es\nprecision highp float;\nin vec2 vUv;\nuniform sampler2D uScene;\nuniform sampler2D uNear;\nuniform sampler2D uFar;\nuniform vec3 uGround;\nuniform vec3 uInk;\nuniform float uLight;\nuniform float uGain;\nuniform float uBloom;\nout vec4 outColor;\nfloat hash(vec2 p) { return fract(sin(dot(p, vec2(12.9898, 78.233))) * 43758.5453); }\nvoid main() {\n vec3 e = texture(uScene, vUv).rgb + (texture(uNear, vUv).rgb * 1.1 + texture(uFar, vUv).rgb * 0.9) * uBloom;\n e *= uGain;\n vec3 dark = 1.0 - (1.0 - uGround) * exp(-e);\n float lum = dot(e, vec3(0.3, 0.55, 0.15));\n vec3 light = mix(uGround, uInk, 1.0 - exp(-
|
|
30
|
+
export declare const COMPOSITE_FRAGMENT = "#version 300 es\nprecision highp float;\nin vec2 vUv;\nuniform sampler2D uScene;\nuniform sampler2D uNear;\nuniform sampler2D uFar;\nuniform vec3 uGround;\nuniform vec3 uInk;\nuniform float uLight;\nuniform float uClear;\nuniform float uGain;\nuniform float uBloom;\nout vec4 outColor;\nfloat hash(vec2 p) { return fract(sin(dot(p, vec2(12.9898, 78.233))) * 43758.5453); }\nvoid main() {\n vec3 e = texture(uScene, vUv).rgb + (texture(uNear, vUv).rgb * 1.1 + texture(uFar, vUv).rgb * 0.9) * uBloom;\n e *= uGain;\n vec3 dark = 1.0 - (1.0 - uGround) * exp(-e);\n float lum = dot(e, vec3(0.3, 0.55, 0.15));\n float ink = 1.0 - exp(-lum * 1.4);\n vec3 light = mix(uGround, uInk, ink);\n vec3 c = mix(dark, light, uLight);\n float a = 1.0;\n if (uClear > 0.5) {\n vec3 shine = 1.0 - exp(-e);\n a = mix(max(max(shine.r, shine.g), shine.b), ink, uLight);\n c = mix(shine, uInk * ink, uLight);\n }\n c = clamp(c + (hash(gl_FragCoord.xy) - 0.5) / 255.0 * a, 0.0, a);\n outColor = vec4(c, a);\n}\n";
|
package/dist/strands/shader.js
CHANGED
|
@@ -308,6 +308,7 @@ uniform sampler2D uFar;
|
|
|
308
308
|
uniform vec3 uGround;
|
|
309
309
|
uniform vec3 uInk;
|
|
310
310
|
uniform float uLight;
|
|
311
|
+
uniform float uClear;
|
|
311
312
|
uniform float uGain;
|
|
312
313
|
uniform float uBloom;
|
|
313
314
|
out vec4 outColor;
|
|
@@ -317,9 +318,16 @@ void main() {
|
|
|
317
318
|
e *= uGain;
|
|
318
319
|
vec3 dark = 1.0 - (1.0 - uGround) * exp(-e);
|
|
319
320
|
float lum = dot(e, vec3(0.3, 0.55, 0.15));
|
|
320
|
-
|
|
321
|
+
float ink = 1.0 - exp(-lum * 1.4);
|
|
322
|
+
vec3 light = mix(uGround, uInk, ink);
|
|
321
323
|
vec3 c = mix(dark, light, uLight);
|
|
322
|
-
|
|
323
|
-
|
|
324
|
+
float a = 1.0;
|
|
325
|
+
if (uClear > 0.5) {
|
|
326
|
+
vec3 shine = 1.0 - exp(-e);
|
|
327
|
+
a = mix(max(max(shine.r, shine.g), shine.b), ink, uLight);
|
|
328
|
+
c = mix(shine, uInk * ink, uLight);
|
|
329
|
+
}
|
|
330
|
+
c = clamp(c + (hash(gl_FragCoord.xy) - 0.5) / 255.0 * a, 0.0, a);
|
|
331
|
+
outColor = vec4(c, a);
|
|
324
332
|
}
|
|
325
333
|
`;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import { createSheet } from '@fusion.dev/helix-core';
|
|
2
|
-
export const styles = createSheet(`:host {--_switch-height: var(--switch-block-size, var(--helix-size-switch));--_switch-width: var(--switch-inline-size, calc(var(--_switch-height) * 1.75));--_switch-inset: calc(var(--helix-space-2xs) / 2);--_field-control-inline-size: var(--_switch-width);display: inline-flex;flex-direction: column;gap: var(--helix-space-2xs)}[part="field"] {align-items: center;cursor: pointer;display: inline-flex;gap: var(--helix-space-xs)}:host(:disabled) [part="field"] {cursor: default}:host(:disabled) {opacity: 0.5}[part="track"] {background-color: var(--helix-color-surface-sunken);block-size: var(--_switch-height);border: var(--helix-border-thin) solid var(--helix-color-border);border-radius: var(--helix-radii-full);display: grid;flex: 0 0 auto;inline-size: var(--_switch-width);position: relative;transition: background-color var(--helix-duration-fast) var(--helix-easing-standard), border-color var(--helix-duration-fast) var(--helix-easing-standard)}[part="thumb"] {align-items: center;color: var(--switch-icon-color, var(--helix-color-foreground-muted));display: flex;justify-content: center;background-color: var(--switch-thumb-color, var(--helix-color-surface-overlay));block-size: calc(var(--_switch-height) - var(--_switch-inset) * 2);border: var(--helix-border-thin) solid var(--helix-color-border);border-radius: var(--helix-radii-full);inline-size: calc(var(--_switch-height) - var(--_switch-inset) * 2);inset-block-start: 50%;inset-inline-start: calc(var(--_switch-inset) - var(--helix-border-thin));pointer-events: none;position: absolute;translate: 0 -50%;transition: translate var(--helix-duration-fast) var(--helix-easing-emphasized)}:host(:state(checked)) [part="thumb"] {border-color: transparent;color: var(--switch-icon-color, var(--switch-on-color, var(--helix-color-primary-surface)))}[part="thumb"] ::slotted(*) {--icon-size: calc((var(--_switch-height) - var(--_switch-inset) * 2) * 0.7)}:host(:state(checked)) [part="track"] {background-color: var(--switch-on-color, var(--helix-color-primary-surface));border-color: var(--switch-on-color, var(--helix-color-primary-surface))}[part="control"] {appearance: none;block-size: 100%;cursor: inherit;grid-area: 1 / 1;inline-size: 100%;margin: var(--helix-space-none);opacity: 0}:host(:state(checked)) [part="thumb"] {background-color: var(--switch-thumb-color, var(--helix-color-foreground-on-primary));translate: calc(var(--_switch-width) - var(--_switch-height)) -50%}[part="track"]:has([part="control"]:focus-visible) [part="thumb"] {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset)}:host(:state(invalid)) [part="track"] {border-color: var(--helix-color-danger)}[part="label"][data-empty] {display: none}@media print {:host {print-color-adjust: exact}}`);
|
|
2
|
+
export const styles = createSheet(`:host {--_switch-height: var(--switch-block-size, var(--helix-size-switch));--_switch-width: var(--switch-inline-size, calc(var(--_switch-height) * 1.75));--_switch-inset: calc(var(--helix-space-2xs) / 2);--_field-control-inline-size: var(--_switch-width);display: inline-flex;flex-direction: column;gap: var(--helix-space-2xs)}[part="field"] {align-items: center;cursor: pointer;display: inline-flex;gap: var(--helix-space-xs)}:host(:disabled) [part="field"] {cursor: default}:host(:disabled) {opacity: 0.5}[part="track"] {background-color: var(--helix-color-surface-sunken);block-size: var(--_switch-height);border: var(--helix-border-thin) solid var(--helix-color-border);border-radius: var(--helix-radii-full);display: grid;flex: 0 0 auto;inline-size: var(--_switch-width);position: relative;transition: background-color var(--helix-duration-fast) var(--helix-easing-standard), border-color var(--helix-duration-fast) var(--helix-easing-standard)}[part="thumb"] {align-items: center;color: var(--switch-icon-color, light-dark(var(--helix-color-foreground-muted), var(--helix-color-surface-sunken)));display: flex;justify-content: center;background-color: var(--switch-thumb-color, light-dark(var(--helix-color-surface-overlay), var(--helix-color-foreground-muted)));block-size: calc(var(--_switch-height) - var(--_switch-inset) * 2);border: var(--helix-border-thin) solid var(--helix-color-border);border-radius: var(--helix-radii-full);inline-size: calc(var(--_switch-height) - var(--_switch-inset) * 2);inset-block-start: 50%;inset-inline-start: calc(var(--_switch-inset) - var(--helix-border-thin));pointer-events: none;position: absolute;translate: 0 -50%;transition: translate var(--helix-duration-fast) var(--helix-easing-emphasized)}:host(:state(checked)) [part="thumb"] {border-color: transparent;color: var(--switch-icon-color, var(--switch-on-color, var(--helix-color-primary-surface)))}[part="thumb"] ::slotted(*) {--icon-size: calc((var(--_switch-height) - var(--_switch-inset) * 2) * 0.7)}:host(:state(checked)) [part="track"] {background-color: var(--switch-on-color, var(--helix-color-primary-surface));border-color: var(--switch-on-color, var(--helix-color-primary-surface))}[part="control"] {appearance: none;block-size: 100%;cursor: inherit;grid-area: 1 / 1;inline-size: 100%;margin: var(--helix-space-none);opacity: 0}:host(:state(checked)) [part="thumb"] {background-color: var(--switch-thumb-color, var(--helix-color-foreground-on-primary));translate: calc(var(--_switch-width) - var(--_switch-height)) -50%}[part="track"]:has([part="control"]:focus-visible) [part="thumb"] {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset)}:host(:state(invalid)) [part="track"] {border-color: var(--helix-color-danger)}[part="label"][data-empty] {display: none}@media print {:host {print-color-adjust: exact}}`);
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import { createSheet } from '@fusion.dev/helix-core';
|
|
2
|
-
export const styles = createSheet(`:host {--_tabs-rule: none;--_tab-radius: var(--helix-radii-sm);--_tab-selected-shadow: var(--helix-shadow-sm);--_tab-selected-surface: var(--helix-color-surface-raised);display: grid;grid-template-rows: auto minmax(0, 1fr);min-block-size: 0}[part="tabs"] {background-image: var(--_tabs-rule, none);background-position: bottom;background-repeat: repeat-x;background-size: 100% var(--helix-border-thin);display: flex;gap: var(--tabs-gap, var(--helix-space-2xs));overflow-x: auto}[part="scroll-start"], [part="scroll-end"] {align-items: center;background-color: var(--tabs-scroll-background-color, var(--helix-color-surface));border: none;color: var(--helix-color-foreground-muted);cursor: pointer;display: inline-flex;flex: none;justify-content: center;padding-inline: var(--helix-space-2xs);position: sticky;z-index: 1}[part="scroll-start"] {inset-inline-start: 0}[part="scroll-end"] {inset-inline-end: 0}[part="scroll-start"][hidden], [part="scroll-end"][hidden] {display: none}[part="scroll-start"] svg, [part="scroll-end"] svg {block-size: var(--helix-size-icon);inline-size: var(--helix-size-icon)}slot[name="scroll-start-icon"]::slotted(*), slot[name="scroll-end-icon"]::slotted(*) {--icon-size: var(--helix-size-icon);block-size: var(--helix-size-icon);inline-size: var(--helix-size-icon)}[part="scroll-start"]:hover, [part="scroll-end"]:hover {color: var(--helix-color-foreground)}:host([orientation="vertical"]) [part="scroll-start"] {inset-block-start: 0;inset-inline-start: auto;padding-block: var(--helix-space-2xs)}:host([orientation="vertical"]) [part="scroll-end"] {inset-block-end: 0;inset-inline-end: auto;padding-block: var(--helix-space-2xs)}:host([variant="underlined"]) {--_tabs-rule: linear-gradient(var(--tabs-rule-color, var(--helix-color-border)), var(--tabs-rule-color, var(--helix-color-border)));--_tab-radius: var(--helix-radii-none);--_tab-selected-shadow: none;--_tab-selected-surface: transparent}:host([variant="segmented"]) [part="tabs"] {--_tab-selected-surface: var(--helix-color-surface-overlay);--_tab-height: 100%;background-color: var(--helix-color-surface-sunken);block-size: var(--helix-size-control);border: var(--helix-border-thin) solid var(--helix-color-border);border-radius: var(--helix-radii-sm);justify-self: start;padding: var(--helix-space-2xs);inline-size: fit-content}[part="panels"] {display: grid;grid-template-rows: minmax(0, 1fr);min-block-size: 0;min-inline-size: 0}[part="indicator"] {background-color: var(--_indicator-color, transparent);block-size: var(--_indicator-block, var(--helix-border-thick));border: var(--_indicator-border, 0) solid var(--_indicator-border-color, transparent);border-radius: var(--tabs-indicator-radius, var(--_indicator-radius, var(--helix-radii-none)));box-shadow: var(--tabs-indicator-shadow, var(--_indicator-shadow, none));inline-size: var(--indicator-inline-size, 0);inset-block-start: 0;inset-inline-start: 0;opacity: 0;position: absolute;translate: calc(var(--indicator-x, 0px) + var(--_indicator-offset-x, 0px)) calc(var(--indicator-y, 0px) + var(--_indicator-offset, 0px));transition: translate var(--helix-duration-normal) var(--helix-easing-emphasized), inline-size var(--helix-duration-normal) var(--helix-easing-emphasized), opacity var(--helix-duration-fast) var(--helix-easing-standard);z-index: var(--helix-layer-base)}[part="indicator"][data-placed] {opacity: 1}[part="tabs"] {position: relative}::slotted(helix-tab) {position: relative;z-index: var(--helix-layer-raised)}:host([variant="underlined"]) [part="indicator"] {--_indicator-block: var(--tabs-indicator-thickness, var(--helix-border-thick));--_indicator-color: var(--tabs-indicator-color, var(--helix-color-primary));--_indicator-offset: calc(var(--indicator-block-size, 0px) - var(--tabs-indicator-thickness, var(--helix-border-thick)))}:host([variant="segmented"]) [part="indicator"] {--_indicator-block: var(--indicator-block-size, 0);--_indicator-color: var(--tabs-indicator-color, var(--helix-color-surface-overlay));--_indicator-radius: calc(var(--helix-radii-sm) - var(--helix-border-thin));--_indicator-shadow: var(--helix-shadow-sm);--_indicator-offset: 0px}:host([variant="segmented"]) {--_tab-selected-surface: transparent}:host(:not([variant])) [part="indicator"] {--_indicator-block: var(--indicator-block-size, 0);--_indicator-border: var(--helix-border-thin);--_indicator-border-color: var(--helix-color-border);--_indicator-color: var(--tabs-indicator-color, var(--helix-color-surface-overlay));--_indicator-radius: var(--helix-radii-sm);--_indicator-shadow: var(--helix-shadow-sm);--_indicator-offset: 0px}:host(:not([variant])) {--_tab-selected-surface: transparent;--_tab-selected-shadow: none}:host([orientation="vertical"]) {--_tabs-inline-sign: 1;--_tabs-panel-padding-block-start: var(--helix-space-none);--_tabs-panel-padding-inline-start: var(--helix-space-md);grid-template-columns: auto minmax(0, 1fr);grid-template-rows: minmax(0, 1fr)}:host([orientation="vertical"]:dir(rtl)) {--_tabs-inline-sign: -1}:host([orientation="vertical"]) [part="tabs"] {align-content: start;background-position: right;background-repeat: repeat-y;background-size: var(--helix-border-thin) 100%;flex-direction: column;overflow-x: visible;overflow-y: auto}:host([orientation="vertical"]:dir(rtl)) [part="tabs"] {background-position: left}:host([orientation="vertical"]) ::slotted(helix-tab) {--_tab-inline-size: 100%;--_tab-justify: flex-start}:host([orientation="vertical"][variant="segmented"]) [part="tabs"] {--_tab-height: initial;block-size: auto;justify-self: start}:host([orientation="vertical"][variant="underlined"]) [part="indicator"] {--_indicator-block: var(--indicator-block-size, 0);--_indicator-offset: 0px;--_indicator-offset-x: calc((var(--indicator-inline-size, 0px) - var(--tabs-indicator-thickness, var(--helix-border-thick))) * var(--_tabs-inline-sign, 1));inline-size: var(--tabs-indicator-thickness, var(--helix-border-thick))}@media print {:host {box-shadow: none;overflow: visible}}`);
|
|
2
|
+
export const styles = createSheet(`:host {--_tabs-rule: none;--_tab-radius: var(--helix-radii-sm);--_tab-selected-shadow: var(--helix-shadow-sm);--_tab-selected-surface: var(--helix-color-surface-raised);display: grid;grid-template-rows: auto minmax(0, 1fr);min-block-size: 0}[part="tabs"] {background-image: var(--_tabs-rule, none);background-position: bottom;background-repeat: repeat-x;background-size: 100% var(--helix-border-thin);display: flex;gap: var(--tabs-gap, var(--helix-space-2xs));overflow-x: auto}[part="scroll-start"], [part="scroll-end"] {align-items: center;background-color: var(--tabs-scroll-background-color, var(--helix-color-surface));border: none;color: var(--helix-color-foreground-muted);cursor: pointer;display: inline-flex;flex: none;justify-content: center;padding-inline: var(--helix-space-2xs);position: sticky;z-index: 1}[part="scroll-start"] {inset-inline-start: 0}[part="scroll-end"] {inset-inline-end: 0}[part="scroll-start"][hidden], [part="scroll-end"][hidden] {display: none}[part="scroll-start"] svg, [part="scroll-end"] svg {block-size: var(--helix-size-icon);inline-size: var(--helix-size-icon)}slot[name="scroll-start-icon"]::slotted(*), slot[name="scroll-end-icon"]::slotted(*) {--icon-size: var(--helix-size-icon);block-size: var(--helix-size-icon);inline-size: var(--helix-size-icon)}[part="scroll-start"]:hover, [part="scroll-end"]:hover {color: var(--helix-color-foreground)}:host([orientation="vertical"]) [part="scroll-start"] {inset-block-start: 0;inset-inline-start: auto;padding-block: var(--helix-space-2xs)}:host([orientation="vertical"]) [part="scroll-end"] {inset-block-end: 0;inset-inline-end: auto;padding-block: var(--helix-space-2xs)}:host([variant="underlined"]) {--_tabs-rule: linear-gradient(var(--tabs-rule-color, var(--helix-color-border)), var(--tabs-rule-color, var(--helix-color-border)));--_tab-radius: var(--helix-radii-none);--_tab-selected-shadow: none;--_tab-selected-surface: transparent}:host([variant="segmented"]) [part="tabs"] {--_tab-selected-surface: var(--helix-color-surface-overlay);--_tab-height: 100%;background-color: var(--helix-color-surface-sunken);block-size: var(--helix-size-control);border: var(--helix-border-thin) solid var(--helix-color-border);border-radius: var(--helix-radii-sm);justify-self: start;padding: var(--helix-space-2xs);inline-size: fit-content}[part="panels"] {display: grid;grid-template-rows: minmax(0, 1fr);min-block-size: 0;min-inline-size: 0}[part="indicator"] {background-color: var(--_indicator-color, transparent);block-size: var(--_indicator-block, var(--helix-border-thick));border: var(--_indicator-border, 0) solid var(--_indicator-border-color, transparent);border-radius: var(--tabs-indicator-radius, var(--_indicator-radius, var(--helix-radii-none)));box-shadow: var(--tabs-indicator-shadow, var(--_indicator-shadow, none));inline-size: var(--indicator-inline-size, 0);inset-block-start: 0;inset-inline-start: 0;opacity: 0;position: absolute;translate: calc(var(--indicator-x, 0px) + var(--_indicator-offset-x, 0px)) calc(var(--indicator-y, 0px) + var(--_indicator-offset, 0px));transition: translate var(--helix-duration-normal) var(--helix-easing-emphasized), inline-size var(--helix-duration-normal) var(--helix-easing-emphasized), opacity var(--helix-duration-fast) var(--helix-easing-standard);z-index: var(--helix-layer-base)}[part="indicator"][data-placed] {opacity: 1}[part="tabs"] {position: relative}::slotted(helix-tab) {position: relative;z-index: var(--helix-layer-raised)}:host([variant="underlined"]) [part="indicator"] {--_indicator-block: var(--tabs-indicator-thickness, var(--helix-border-thick));--_indicator-color: var(--tabs-indicator-color, var(--helix-color-primary));--_indicator-offset: calc(var(--indicator-block-size, 0px) - var(--tabs-indicator-thickness, var(--helix-border-thick)))}:host([variant="segmented"]) [part="indicator"] {--_indicator-block: var(--indicator-block-size, 0);--_indicator-color: var(--tabs-indicator-color, var(--helix-color-surface-overlay));--_indicator-radius: calc(var(--helix-radii-sm) - var(--helix-border-thin));--_indicator-shadow: var(--helix-shadow-sm);--_indicator-offset: 0px}:host([variant="segmented"]) {--_tab-selected-surface: transparent}:host(:not([variant])) [part="indicator"] {--_indicator-block: var(--indicator-block-size, 0);--_indicator-border: var(--helix-border-thin);--_indicator-border-color: var(--helix-color-border);--_indicator-color: var(--tabs-indicator-color, var(--helix-color-surface-overlay));--_indicator-radius: var(--helix-radii-sm);--_indicator-shadow: var(--helix-shadow-sm);--_indicator-offset: 0px}:host(:not([variant])) {--_tab-selected-surface: transparent;--_tab-selected-shadow: none}:host([orientation="vertical"]) {--_tabs-inline-sign: 1;--_tabs-panel-padding-block-start: var(--helix-space-none);--_tabs-panel-padding-inline-start: var(--helix-space-md);grid-template-columns: auto minmax(0, 1fr);grid-template-rows: minmax(0, 1fr)}:host([orientation="vertical"]:dir(rtl)) {--_tabs-inline-sign: -1}:host([orientation="vertical"]) [part="tabs"] {align-content: start;background-position: right;background-repeat: repeat-y;background-size: var(--helix-border-thin) 100%;flex-direction: column;overflow-x: visible;overflow-y: auto}:host([orientation="vertical"]:dir(rtl)) [part="tabs"] {background-position: left}:host([orientation="vertical"]) ::slotted(helix-tab) {--_tab-inline-size: 100%;--_tab-justify: flex-start}:host([orientation="vertical"][variant="segmented"]) [part="tabs"] {--_tab-height: initial;block-size: auto;justify-self: start}:host([orientation="vertical"][variant="underlined"]) [part="indicator"] {--_indicator-block: var(--indicator-block-size, 0);--_indicator-offset: 0px;--_indicator-offset-x: calc((var(--indicator-inline-size, 0px) - var(--tabs-indicator-thickness, var(--helix-border-thick))) * var(--_tabs-inline-sign, 1));inline-size: var(--tabs-indicator-thickness, var(--helix-border-thick))}@media print {:host {box-shadow: none;overflow: visible}}:host([emphasis="subtle"]:not([variant])) [part="indicator"], :host([emphasis="subtle"][variant="segmented"]) [part="indicator"] {--_indicator-border: 0;--_indicator-color: var(--tabs-indicator-color, color-mix(in oklab, var(--helix-color-foreground) 8%, transparent));--_indicator-shadow: none}:host([emphasis="subtle"][variant="underlined"]) [part="indicator"] {--_indicator-color: var(--tabs-indicator-color, var(--helix-color-foreground))}:host([dismiss-marks="hover"]) {--_tabs-dismiss-rest: 0}`);
|
|
@@ -16,6 +16,19 @@ import type { CSSResultGroup } from 'lit';
|
|
|
16
16
|
* - `underlined` makes it a bar along the bottom of the strip, on a rule.
|
|
17
17
|
* - `segmented` makes it the size of the tab's box, inside a sunken track.
|
|
18
18
|
*
|
|
19
|
+
* `emphasis="subtle"` makes the mark quieter, for tabs inside other chrome
|
|
20
|
+
* such as a pane's header: a tint with no edge or shadow, the same wash a
|
|
21
|
+
* subtle button takes.
|
|
22
|
+
*
|
|
23
|
+
* **Tabs with no panels are a strip.** Where what each tab stands for lives
|
|
24
|
+
* outside the set, such as a pane's pages or shells, leave the panels out: the
|
|
25
|
+
* tabs keep their keys and their selection, `active` and `helix-activate` say
|
|
26
|
+
* which is current, and the page shows the rest. Put a control that adds a tab,
|
|
27
|
+
* such as a plus, beside the set rather than in it, so the tab list holds tabs
|
|
28
|
+
* alone. With `dismissible` tabs, `dismiss-marks="hover"` keeps each close
|
|
29
|
+
* mark out of sight until the tab is current, under the pointer, or holds
|
|
30
|
+
* focus, as a browser's tabs do.
|
|
31
|
+
*
|
|
19
32
|
* @since 0.1.0
|
|
20
33
|
* @status stable
|
|
21
34
|
* @category navigation
|
|
@@ -45,6 +58,29 @@ import type { CSSResultGroup } from 'lit';
|
|
|
45
58
|
*/
|
|
46
59
|
export declare class HelixTabs extends HelixHeadlessTabs {
|
|
47
60
|
static styles: CSSResultGroup;
|
|
61
|
+
/**
|
|
62
|
+
* When the close mark of each `dismissible` tab shows.
|
|
63
|
+
*
|
|
64
|
+
* Unset, or `always`, every mark shows. `hover` shows a tab's mark while it
|
|
65
|
+
* is current, under the pointer, or holds focus, and keeps its room on every
|
|
66
|
+
* tab, so the labels do not move as the marks come and go. For a strip of
|
|
67
|
+
* many dismissible tabs, where a mark on each reads as a row of crosses. A
|
|
68
|
+
* keyboard closes a tab with Delete whether its mark shows or not.
|
|
69
|
+
*/
|
|
70
|
+
dismissMarks?: 'always' | 'hover';
|
|
71
|
+
/**
|
|
72
|
+
* How loud the mark on the current tab is.
|
|
73
|
+
*
|
|
74
|
+
* Unset is the mark `variant` draws at rest. `subtle` is a tint with no
|
|
75
|
+
* edge or shadow: the raised pill becomes a wash, the `segmented` track's
|
|
76
|
+
* pill does the same inside it, and the `underlined` bar takes the
|
|
77
|
+
* foreground's ink in place of the primary color. For tabs inside other
|
|
78
|
+
* chrome, where a raised mark reads as a control laid on top of it.
|
|
79
|
+
*
|
|
80
|
+
* Independent of `variant`, since each of its marks has a quiet form: the two
|
|
81
|
+
* answer different questions, which is the test the axis registry applies.
|
|
82
|
+
*/
|
|
83
|
+
emphasis?: 'subtle';
|
|
48
84
|
}
|
|
49
85
|
declare global {
|
|
50
86
|
interface HTMLElementTagNameMap {
|
|
@@ -1,10 +1,17 @@
|
|
|
1
1
|
import { __decorate } from "tslib";
|
|
2
2
|
import { customElement } from '@fusion.dev/helix-core';
|
|
3
3
|
import { HelixHeadlessTabs } from '@fusion.dev/helix-headless/tabs';
|
|
4
|
+
import { property } from 'lit/decorators.js';
|
|
4
5
|
import { styles } from './tabs-root.css.js';
|
|
5
6
|
let HelixTabs = class HelixTabs extends HelixHeadlessTabs {
|
|
6
7
|
static { this.styles = styles; }
|
|
7
8
|
};
|
|
9
|
+
__decorate([
|
|
10
|
+
property({ attribute: 'dismiss-marks', reflect: true })
|
|
11
|
+
], HelixTabs.prototype, "dismissMarks", void 0);
|
|
12
|
+
__decorate([
|
|
13
|
+
property({ reflect: true })
|
|
14
|
+
], HelixTabs.prototype, "emphasis", void 0);
|
|
8
15
|
HelixTabs = __decorate([
|
|
9
16
|
customElement('helix-tabs')
|
|
10
17
|
], HelixTabs);
|
package/dist/tabs/tab/tab.css.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import { createSheet } from '@fusion.dev/helix-core';
|
|
2
|
-
export const styles = createSheet(`:host {display: inline-flex}[part="tab"] {align-items: center;background-color: transparent;block-size: var(--_tab-height, var(--tabs-tab-block-size, var(--helix-size-control)));border: none;border-block-end: var(--helix-border-thick) solid transparent;border-radius: var(--tabs-tab-radius, var(--_tab-radius, var(--helix-radii-none)));color: var(--tabs-tab-color, var(--helix-color-foreground-muted));cursor: pointer;font: inherit;font-size: var(--tabs-tab-font-size, var(--helix-text-
|
|
2
|
+
export const styles = createSheet(`:host {display: inline-flex;max-inline-size: var(--tabs-tab-max-inline-size, none)}[part="tab"] {max-inline-size: 100%;min-inline-size: 0}[part="label"] {display: block;min-inline-size: 0;overflow: hidden;text-overflow: ellipsis}@supports (text-box: trim-both cap alphabetic) {[part="label"] {padding-block: calc((1lh - 1cap) / 2);text-box: trim-both cap alphabetic}}[part="tab"] {align-items: center;background-color: transparent;block-size: var(--_tab-height, var(--tabs-tab-block-size, var(--helix-size-control)));border: none;border-block-end: var(--helix-border-thick) solid transparent;border-radius: var(--tabs-tab-radius, var(--_tab-radius, var(--helix-radii-none)));color: var(--tabs-tab-color, var(--helix-color-foreground-muted));cursor: pointer;font: inherit;font-size: var(--tabs-tab-font-size, var(--helix-text-control));font-weight: var(--tabs-tab-font-weight, var(--helix-weight-medium));display: inline-flex;inline-size: var(--_tab-inline-size, auto);justify-content: var(--_tab-justify, center);padding-block: var(--helix-border-thick) 0;padding-inline: var(--tabs-tab-padding-inline, var(--helix-space-sm));text-decoration: none;transition: background-color var(--helix-duration-fast) var(--helix-easing-standard), border-color var(--helix-duration-normal) var(--helix-easing-emphasized), color var(--helix-duration-fast) var(--helix-easing-standard);white-space: nowrap}[part="tab"]:hover:not(:disabled, [aria-disabled="true"]) {background-color: var(--tabs-tab-hover-background-color, color-mix(in oklab, var(--helix-color-foreground) 5%, transparent));color: var(--tabs-tab-hover-color, var(--helix-color-foreground))}:host(:state(selected)) [part="tab"], :host(:state(selected)) [part="tab"]:hover {background-color: var(--tabs-tab-selected-background-color, var(--_tab-selected-surface, transparent));box-shadow: var(--_tab-selected-shadow, none);color: var(--tabs-tab-selected-color, var(--helix-color-foreground))}[part="tab"]:disabled, [part="tab"][aria-disabled="true"] {cursor: not-allowed;opacity: var(--tabs-tab-disabled-opacity, 0.5)}[part="tab"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: calc(var(--helix-size-focus-offset) * -1)}[part="dismiss"] {align-items: center;border-radius: var(--helix-radii-sm);color: var(--tabs-tab-dismiss-color, currentColor);display: inline-flex;margin-inline: var(--helix-space-2xs) calc(var(--helix-space-2xs) * -1);opacity: var(--_tabs-dismiss-rest, 1);padding: var(--helix-space-none);transition: opacity var(--helix-duration-fast) var(--helix-easing-standard)}:host(:state(selected)) [part="dismiss"], :host(:hover) [part="dismiss"], :host(:focus-within) [part="dismiss"] {opacity: 1}[part="dismiss"] svg {block-size: 1em;inline-size: 1em}slot[name="dismiss-icon"]::slotted(*) {--icon-size: 1em;block-size: 1em;inline-size: 1em}[part="dismiss"]:hover {background-color: color-mix(in oklab, var(--helix-color-foreground) 10%, transparent)}`);
|
package/dist/tabs/tab/tab.d.ts
CHANGED
|
@@ -18,6 +18,7 @@ import type { CSSResultGroup } from 'lit';
|
|
|
18
18
|
*
|
|
19
19
|
* @csspart dismiss - The mark a pointer presses to close a `dismissible` tab.
|
|
20
20
|
* @csspart dismiss-mark - The glyph on that mark, where none is slotted.
|
|
21
|
+
* @csspart label - The slot the tab's label is in, which shortens with an ellipsis under `--tabs-tab-max-inline-size`.
|
|
21
22
|
* @csspart tab - The tab itself.
|
|
22
23
|
*
|
|
23
24
|
* @cssproperty --tabs-tab-block-size - The height of a tab. `segmented` sizes its tabs to the track and does not read it.
|
|
@@ -28,6 +29,7 @@ import type { CSSResultGroup } from 'lit';
|
|
|
28
29
|
* @cssproperty --tabs-tab-font-weight - The weight of a tab's label.
|
|
29
30
|
* @cssproperty --tabs-tab-hover-background-color - The wash under the pointer.
|
|
30
31
|
* @cssproperty --tabs-tab-hover-color - The label color under the pointer.
|
|
32
|
+
* @cssproperty --tabs-tab-max-inline-size - The widest a tab grows. A longer label ends in an ellipsis, as a tag's does. Unset, a tab is as wide as its label.
|
|
31
33
|
* @cssproperty --tabs-tab-padding-inline - The space either side of the label.
|
|
32
34
|
* @cssproperty --tabs-tab-radius - The corners of a tab, which the hover wash takes.
|
|
33
35
|
* @cssproperty --tabs-tab-selected-background-color - The fill of the current tab itself, under the moving mark.
|
|
@@ -2,6 +2,7 @@ import { HelixHeadlessTerminal } from '@fusion.dev/helix-headless/terminal';
|
|
|
2
2
|
import type { CSSResultGroup } from 'lit';
|
|
3
3
|
import '../../button/index.js';
|
|
4
4
|
import '../../icon-button/index.js';
|
|
5
|
+
import '../../tooltip/index.js';
|
|
5
6
|
import '../../toolbar/index.js';
|
|
6
7
|
/**
|
|
7
8
|
* @summary A frame around a terminal emulator that runs a shell you connect.
|
|
@@ -7,6 +7,7 @@ import { styles as liveStyles } from '../../shared/live/live.css.js';
|
|
|
7
7
|
import { styles } from './terminal-root.css.js';
|
|
8
8
|
import '../../button/index.js';
|
|
9
9
|
import '../../icon-button/index.js';
|
|
10
|
+
import '../../tooltip/index.js';
|
|
10
11
|
import '../../toolbar/index.js';
|
|
11
12
|
let HelixTerminal = class HelixTerminal extends HelixHeadlessTerminal {
|
|
12
13
|
constructor() {
|
|
@@ -23,8 +23,7 @@ import '../../time-picker/index.js';
|
|
|
23
23
|
* @cssproperty --time-input-background-color - Fill behind the field.
|
|
24
24
|
* @cssproperty --time-input-border-color - Color of the panel's edge.
|
|
25
25
|
* @cssproperty --time-input-border-width - Width of the panel's edge. Defaults to
|
|
26
|
-
* `--helix-border-floating`,
|
|
27
|
-
* your theme sets a width.
|
|
26
|
+
* `--helix-border-floating`, a hairline, so the panel has an edge as well as its shadow over a dark page. Set it to `0` for the shadow alone.
|
|
28
27
|
* @cssproperty --time-input-segment-focus-background-color - The fill behind the
|
|
29
28
|
* segment with focus, in `segmented`. It follows `--helix-color-primary-surface`.
|
|
30
29
|
* @cssproperty --time-input-segment-focus-color - The text of the segment with
|
|
@@ -15,8 +15,7 @@ import type { CSSResultGroup } from 'lit';
|
|
|
15
15
|
* @cssproperty --toast-background-color - The panel's color. Follows `--helix-color-surface-overlay`.
|
|
16
16
|
* @cssproperty --toast-border-color - Color of the panel's edge.
|
|
17
17
|
* @cssproperty --toast-border-width - Width of the panel's edge. Follows
|
|
18
|
-
* `--helix-border-floating`,
|
|
19
|
-
* theme sets a border.
|
|
18
|
+
* `--helix-border-floating`, a hairline, so the panel has an edge as well as its shadow over a dark page. Set it to `0` for the shadow alone.
|
|
20
19
|
* @cssproperty --toast-color - Color of the message's text.
|
|
21
20
|
* @cssproperty --toast-description-color - Color of the line in the `description` slot, under the heading.
|
|
22
21
|
* @cssproperty --toast-dismiss-color - Color of the dismiss control's mark at rest.
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import { createSheet } from '@fusion.dev/helix-core';
|
|
2
|
-
export const styles = createSheet(`:host {display: contents}[part~="surface"] {overflow: visible;align-items: center;display: flex;gap: var(--tooltip-gap, var(--helix-space-2xs));background-color: var(--tooltip-background-color, var(--helix-color-surface-inverse));border: none;border-radius: var(--tooltip-radius, var(--helix-radii-sm));color: var(--tooltip-color, var(--helix-color-foreground-inverse));font-family: var(--helix-font-sans);font-size: var(--tooltip-font-size, var(--helix-text-xs));font-weight: var(--helix-weight-regular);inline-size: max-content;line-height: var(--helix-leading-tight);margin: var(--helix-space-none);max-inline-size: var(--tooltip-max-inline-size, 16rem);opacity: 0;padding: var(--tooltip-padding, var(--helix-space-2xs) var(--helix-space-xs));position: fixed;scale: 0;transition: opacity var(--helix-duration-fast) var(--helix-easing-standard), scale var(--helix-duration-fast) var(--helix-easing-emphasized), display var(--helix-duration-fast) allow-discrete, overlay var(--helix-duration-fast) allow-discrete}[part~="surface"][data-placed] {opacity: 1;scale: 1}[part~="arrow"] {background-color: var(--tooltip-background-color, var(--helix-color-surface-inverse));block-size: var(--tooltip-arrow-size, 0.5rem);inline-size: var(--tooltip-arrow-size, 0.5rem);position: absolute;rotate: 45deg}:host([material="glass"]) [part~="surface"], :host([material="glass"]) [part~="arrow"] {backdrop-filter: var(--tooltip-backdrop, var(--helix-material-backdrop));background-color: var(--tooltip-background-color, var(--helix-material-translucent))}:host([material="frosted"]) [part~="surface"], :host([material="frosted"]) [part~="arrow"] {backdrop-filter: var(--tooltip-backdrop, blur(var(--helix-material-blur-lg)));background-color: var(--tooltip-background-color, var(--helix-material-translucent-strong))}:host([material="frosted"]) [part~="surface"], :host([material="glass"]) [part~="surface"] {border: var(--helix-border-thin) solid var(--tooltip-border-color, var(--helix-color-border));color: var(--tooltip-color, var(--helix-color-foreground))}[part~="surface"][data-placement^="top"] {transform-origin: var(--floating-arrow-x, 50%) 100%}[part~="surface"][data-placement^="bottom"] {transform-origin: var(--floating-arrow-x, 50%) 0}[part~="surface"][data-placement^="left"] {transform-origin: 100% var(--floating-arrow-y, 50%)}[part~="surface"][data-placement^="right"] {transform-origin: 0 var(--floating-arrow-y, 50%)}[part~="surface"]:not(:popover-open) {display: none}@media (prefers-reduced-motion: reduce) {[part~="surface"] {scale: 1;transition: none}[part~="surface"][data-placed] {scale: 1}}@media print {:host {display: none}}`);
|
|
2
|
+
export const styles = createSheet(`:host {display: contents}[part~="surface"] {overflow: visible;align-items: center;display: flex;gap: var(--tooltip-gap, var(--helix-space-2xs));background-color: var(--tooltip-background-color, var(--helix-color-surface-inverse));border: none;border-radius: var(--tooltip-radius, var(--helix-radii-sm));color: var(--tooltip-color, var(--helix-color-foreground-inverse));font-family: var(--helix-font-sans);font-size: var(--tooltip-font-size, var(--helix-text-xs));font-weight: var(--helix-weight-regular);inline-size: max-content;line-height: var(--helix-leading-tight);margin: var(--helix-space-none);max-inline-size: var(--tooltip-max-inline-size, 16rem);opacity: 0;padding: var(--tooltip-padding, var(--helix-space-2xs) var(--helix-space-xs));position: fixed;scale: 0;transition: opacity var(--helix-duration-fast) var(--helix-easing-standard), scale var(--helix-duration-fast) var(--helix-easing-emphasized), display var(--helix-duration-fast) allow-discrete, overlay var(--helix-duration-fast) allow-discrete}[part~="surface"][data-placed] {opacity: 1;scale: 1}[part~="arrow"] {background-color: var(--tooltip-background-color, var(--helix-color-surface-inverse));block-size: var(--tooltip-arrow-size, 0.5rem);inline-size: var(--tooltip-arrow-size, 0.5rem);position: absolute;rotate: 45deg}:host([material="glass"]) [part~="surface"], :host([material="glass"]) [part~="arrow"] {backdrop-filter: var(--tooltip-backdrop, var(--helix-material-backdrop));background-color: var(--tooltip-background-color, var(--helix-material-translucent))}:host([material="frosted"]) [part~="surface"], :host([material="frosted"]) [part~="arrow"] {backdrop-filter: var(--tooltip-backdrop, blur(var(--helix-material-blur-lg)));background-color: var(--tooltip-background-color, var(--helix-material-translucent-strong))}:host([material="frosted"]) [part~="surface"], :host([material="glass"]) [part~="surface"] {border: var(--helix-border-thin) solid var(--tooltip-border-color, var(--helix-color-border));color: var(--tooltip-color, var(--helix-color-foreground))}[part~="surface"][data-placement^="top"] {transform-origin: var(--floating-arrow-x, 50%) 100%}[part~="surface"][data-placement^="bottom"] {transform-origin: var(--floating-arrow-x, 50%) 0}[part~="surface"][data-placement^="left"] {transform-origin: 100% var(--floating-arrow-y, 50%)}[part~="surface"][data-placement^="right"] {transform-origin: 0 var(--floating-arrow-y, 50%)}[part~="surface"]:not(:popover-open) {display: none}@media (prefers-reduced-motion: reduce) {[part~="surface"] {scale: 1;transition: none}[part~="surface"][data-placed] {scale: 1}}@supports not (overlay: auto) {[part~="surface"] {transition-behavior: normal}}@media print {:host {display: none}}`);
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import { createSheet } from '@fusion.dev/helix-core';
|
|
2
|
-
export const styles = createSheet(`:host {display: contents}[part="spotlight"] {border-radius: var(--tour-spotlight-radius, var(--helix-radii-md));box-shadow: 0 0 0
|
|
2
|
+
export const styles = createSheet(`:host {display: contents}[part="spotlight"] {border-radius: var(--tour-spotlight-radius, var(--helix-radii-md));box-shadow: 0 0 0 200vmax var(--tour-scrim-color, var(--helix-color-overlay));pointer-events: none;position: fixed;transition: left var(--helix-duration-normal) var(--helix-easing-standard), top var(--helix-duration-normal) var(--helix-easing-standard), block-size var(--helix-duration-normal) var(--helix-easing-standard), inline-size var(--helix-duration-normal) var(--helix-easing-standard);z-index: var(--helix-layer-overlay)}[part="backdrop"] {background-color: var(--tour-scrim-color, var(--helix-color-overlay));inset: 0;pointer-events: none;position: fixed;z-index: var(--helix-layer-overlay)}@media print {:host {display: none}}`);
|
|
@@ -16,8 +16,7 @@ import '../../button/index.js';
|
|
|
16
16
|
*
|
|
17
17
|
* @cssproperty --tour-arrow-size - The size of the arrow's box, before it is rotated.
|
|
18
18
|
* @cssproperty --tour-border-width - The width of the panel's border. It follows
|
|
19
|
-
* `--helix-border-floating`,
|
|
20
|
-
* shadow unless a theme sets a border.
|
|
19
|
+
* `--helix-border-floating`, a hairline, so the panel has an edge as well as its shadow over a dark page. Set it to `0` for the shadow alone.
|
|
21
20
|
* @cssproperty --tour-bubble-size - The widest the panel can grow.
|
|
22
21
|
* @cssproperty --tour-padding - The padding inside the panel.
|
|
23
22
|
* @cssproperty --tour-shadow - The shadow under the panel. It follows
|