@fusion.dev/helix 0.105.0 → 0.106.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/custom-elements.json +8259 -4085
- package/dist/accordion/item/accordion-item.d.ts +9 -10
- package/dist/accordion/root/accordion-root.d.ts +8 -9
- package/dist/announcement/root/announcement-root.d.ts +7 -7
- package/dist/app-header/root/app-header-root.d.ts +14 -12
- package/dist/area-chart/root/area-chart-root.d.ts +23 -32
- package/dist/aura/root/aura-root.d.ts +32 -31
- package/dist/avatar/group/avatar-group.d.ts +8 -11
- package/dist/avatar/root/avatar-root.d.ts +4 -5
- package/dist/badge/root/badge-root.d.ts +7 -8
- package/dist/bar-chart/root/bar-chart-root.d.ts +17 -16
- package/dist/blockquote/root/blockquote-root.d.ts +4 -5
- package/dist/breadcrumbs/breadcrumb/breadcrumb.d.ts +7 -7
- package/dist/breadcrumbs/root/breadcrumbs-root.d.ts +2 -2
- package/dist/button/root/button-root.d.ts +16 -13
- package/dist/button-group/root/button-group-root.d.ts +6 -6
- package/dist/callout/root/callout-root.d.ts +8 -8
- package/dist/canvas/edge/canvas-edge.d.ts +3 -3
- package/dist/canvas/node/canvas-node.d.ts +17 -18
- package/dist/canvas/root/canvas-root.d.ts +18 -19
- package/dist/card/root/card-root.d.ts +14 -14
- package/dist/carousel/root/carousel-root.d.ts +11 -14
- package/dist/chat/composer/chat-composer.d.ts +10 -11
- package/dist/chat/message/chat-message.d.ts +18 -18
- package/dist/chat/root/chat-root.d.ts +15 -18
- package/dist/checkbox/root/checkbox-root.d.ts +17 -16
- package/dist/checkbox-group/root/checkbox-group-root.d.ts +6 -5
- package/dist/code/root/code-root.d.ts +9 -9
- package/dist/code-block/root/code-block-root.d.ts +14 -15
- package/dist/color-input/root/color-input-root.d.ts +13 -18
- package/dist/color-picker/root/color-picker-root.d.ts +26 -27
- package/dist/combobox/root/combobox-root.css.js +3 -2
- package/dist/combobox/root/combobox-root.d.ts +8 -8
- package/dist/command/root/command-root.d.ts +5 -6
- package/dist/copy-button/root/copy-button-root.d.ts +4 -5
- package/dist/data-table/root/data-table-root.d.ts +30 -37
- package/dist/date-input/root/date-input-root.d.ts +15 -17
- package/dist/date-picker/root/date-picker-root.d.ts +11 -12
- package/dist/description-list/item/description-list-item.d.ts +2 -2
- package/dist/description-list/root/description-list-root.d.ts +13 -14
- package/dist/dialog/root/dialog-root.d.ts +9 -10
- package/dist/divider/root/divider-root.d.ts +11 -12
- package/dist/donut-chart/root/donut-chart-root.d.ts +12 -15
- package/dist/drawer/root/drawer-root.d.ts +14 -13
- package/dist/drilldown/item/drilldown-item.d.ts +3 -4
- package/dist/drilldown/root/drilldown-root.d.ts +6 -9
- package/dist/element-events.generated.js +7 -0
- package/dist/empty/root/empty-root.d.ts +3 -4
- package/dist/file-input/root/file-input-root.d.ts +8 -12
- package/dist/filter-input/chip/filter-chip.d.ts +11 -10
- package/dist/filter-input/field/filter-field.d.ts +7 -8
- package/dist/filter-input/menu/filter-menu.d.ts +7 -8
- package/dist/filter-input/operator/filter-operator.d.ts +5 -5
- package/dist/filter-input/root/filter-input-root.d.ts +25 -27
- package/dist/flex/root/flex-root.d.ts +9 -14
- package/dist/format-date/root/format-date-root.d.ts +5 -8
- package/dist/grid/root/grid-root.d.ts +13 -11
- package/dist/heatmap/root/heatmap-root.d.ts +34 -31
- package/dist/icon/root/icon-root.d.ts +6 -6
- package/dist/icon-button/root/icon-button-root.d.ts +9 -10
- package/dist/image/root/image-root.d.ts +10 -10
- package/dist/input/root/input-root.d.ts +10 -13
- package/dist/kbd/root/kbd-root.d.ts +6 -7
- package/dist/legend/root/legend-root.d.ts +19 -20
- package/dist/lightbox/item/lightbox-item.d.ts +4 -5
- package/dist/lightbox/root/lightbox-root.d.ts +13 -16
- package/dist/line-chart/root/line-chart-root.d.ts +24 -25
- package/dist/list/item/list-item.d.ts +7 -8
- package/dist/list/root/list-root.d.ts +7 -9
- package/dist/listbox/root/listbox-root.d.ts +8 -9
- package/dist/loader/root/loader-root.d.ts +5 -7
- package/dist/map/buildings/map-buildings.css.d.ts +1 -0
- package/dist/map/buildings/map-buildings.css.js +27 -0
- package/dist/map/buildings/map-buildings.d.ts +28 -0
- package/dist/map/buildings/map-buildings.js +20 -0
- package/dist/map/contours/map-contours.css.d.ts +1 -0
- package/dist/map/contours/map-contours.css.js +8 -0
- package/dist/map/contours/map-contours.d.ts +25 -0
- package/dist/map/contours/map-contours.js +16 -0
- package/dist/map/index.d.ts +5 -0
- package/dist/map/index.js +5 -0
- package/dist/map/landcover/map-landcover.css.d.ts +1 -0
- package/dist/map/landcover/map-landcover.css.js +5 -0
- package/dist/map/landcover/map-landcover.d.ts +25 -0
- package/dist/map/landcover/map-landcover.js +16 -0
- package/dist/map/marker/map-marker.css.js +5 -0
- package/dist/map/position/map-position.css.js +5 -0
- package/dist/map/raster/map-raster.css.d.ts +1 -0
- package/dist/map/raster/map-raster.css.js +4 -0
- package/dist/map/raster/map-raster.d.ts +23 -0
- package/dist/map/raster/map-raster.js +16 -0
- package/dist/map/root/map-root.css.js +218 -1
- package/dist/map/terrain/map-terrain.css.d.ts +1 -0
- package/dist/map/terrain/map-terrain.css.js +12 -0
- package/dist/map/terrain/map-terrain.d.ts +27 -0
- package/dist/map/terrain/map-terrain.js +16 -0
- package/dist/megamenu/root/megamenu-root.d.ts +14 -14
- package/dist/menu/item/menu-item.d.ts +8 -8
- package/dist/menu/root/menu-root.d.ts +9 -9
- package/dist/meter/root/meter-root.d.ts +29 -38
- package/dist/navigation/root/navigation-root.d.ts +4 -5
- package/dist/notifications/group/notification-group.d.ts +9 -13
- package/dist/notifications/notification/notification.d.ts +27 -33
- package/dist/notifications/root/notifications-root.d.ts +9 -11
- package/dist/number-input/root/number-input-root.d.ts +16 -18
- package/dist/object-inspector/root/object-inspector-root.d.ts +11 -12
- package/dist/option/group/option-group.d.ts +3 -4
- package/dist/option/root/option-root.d.ts +7 -8
- package/dist/orb/root/orb-root.d.ts +30 -36
- package/dist/outline/root/outline-root.d.ts +8 -10
- package/dist/pagination/root/pagination-root.d.ts +13 -23
- package/dist/pagination/size/pagination-size.d.ts +7 -7
- package/dist/pagination/summary/pagination-summary.d.ts +3 -4
- package/dist/pin-input/root/pin-input-root.d.ts +8 -11
- package/dist/popover/root/popover-root.d.ts +14 -16
- package/dist/progress/root/progress-root.d.ts +10 -13
- package/dist/qr-code/root/qr-code-root.d.ts +13 -14
- package/dist/quote/root/quote-root.d.ts +2 -2
- package/dist/radio/group/radio-group.d.ts +6 -6
- package/dist/radio/root/radio-root.d.ts +16 -19
- package/dist/rating/root/rating-root.d.ts +9 -9
- package/dist/sandbox/preview/sandbox-preview.d.ts +18 -19
- package/dist/sandbox/root/sandbox-root.d.ts +27 -27
- package/dist/sandbox/source/sandbox-source.d.ts +9 -12
- package/dist/sandbox/status-bar/sandbox-status-bar.d.ts +9 -11
- package/dist/sandbox/terminal/sandbox-terminal.d.ts +13 -15
- package/dist/sandbox/toolbar/sandbox-toolbar.d.ts +8 -9
- package/dist/scatter-chart/root/scatter-chart-root.d.ts +18 -29
- package/dist/scroll-area/root/scroll-area-root.d.ts +13 -13
- package/dist/select/root/select-root.d.ts +14 -14
- package/dist/shared/mixin-control-surface/mixin-control-surface.d.ts +8 -2
- package/dist/shared/viewport/viewport.css.js +5 -1
- package/dist/skeleton/root/skeleton-root.d.ts +6 -7
- package/dist/skip-link/root/skip-link-root.d.ts +16 -19
- package/dist/slider/root/slider-root.d.ts +16 -18
- package/dist/sparkline/root/sparkline-root.d.ts +16 -24
- package/dist/speed-dial/item/speed-dial-item.d.ts +5 -5
- package/dist/speed-dial/root/speed-dial-root.d.ts +3 -4
- package/dist/splitter/root/splitter-root.d.ts +23 -32
- package/dist/stat/group/stat-group.d.ts +4 -5
- package/dist/stat/root/stat-root.d.ts +4 -5
- package/dist/steps/root/steps-root.d.ts +12 -13
- package/dist/switch/root/switch-root.d.ts +13 -17
- package/dist/table/cell/table-cell.css.js +5 -0
- package/dist/table/cell/table-cell.d.ts +4 -4
- package/dist/table/column/table-column.d.ts +3 -4
- package/dist/table/root/table-root.d.ts +5 -6
- package/dist/table/row/table-row.d.ts +3 -3
- package/dist/tabs/panel/tab-panel.d.ts +2 -3
- package/dist/tabs/root/tabs-root.d.ts +12 -11
- package/dist/tabs/tab/tab.d.ts +4 -4
- package/dist/tag/root/tag-root.d.ts +10 -11
- package/dist/text/root/text-root.d.ts +22 -30
- package/dist/textarea/root/textarea-root.d.ts +4 -5
- package/dist/time-input/root/time-input-root.d.ts +12 -14
- package/dist/time-picker/root/time-picker-root.d.ts +8 -10
- package/dist/timeline/item/timeline-item.d.ts +2 -2
- package/dist/timeline/root/timeline-root.d.ts +3 -3
- package/dist/toast/item/toast-item.d.ts +7 -8
- package/dist/toast/root/toast-root.d.ts +10 -12
- package/dist/toggle/group/toggle-group.d.ts +10 -12
- package/dist/toggle/root/toggle-root.d.ts +2 -3
- package/dist/toolbar/root/toolbar-root.d.ts +3 -3
- package/dist/tooltip/root/tooltip-root.d.ts +10 -10
- package/dist/tour/root/tour-root.d.ts +5 -6
- package/dist/tour/stop/tour-stop.d.ts +14 -14
- package/dist/tree/item/tree-item.d.ts +6 -9
- package/dist/tree/root/tree-root.d.ts +7 -8
- package/dist/trend/root/trend-root.d.ts +12 -19
- package/dist/video/root/video-root.d.ts +15 -21
- package/dist/video-playlist/item/video-playlist-item.d.ts +4 -4
- package/dist/video-playlist/menu/video-playlist-menu.d.ts +14 -16
- package/dist/video-playlist/root/video-playlist-root.d.ts +5 -5
- package/dist/virtual-list/root/virtual-list-root.d.ts +6 -8
- package/package.json +6 -6
- package/types/jsx.d.ts +10064 -8833
- package/types/svelte.d.ts +5 -0
- package/types/vue.d.ts +1909 -1480
|
@@ -5,27 +5,26 @@ import type { CSSResultGroup } from 'lit';
|
|
|
5
5
|
*
|
|
6
6
|
* @description
|
|
7
7
|
* The open and close transition animates `grid-template-rows` from `0fr` to
|
|
8
|
-
* `1fr`, which
|
|
9
|
-
*
|
|
10
|
-
* `prefers-reduced-motion`.
|
|
8
|
+
* `1fr`, which reaches the content's intrinsic height without measuring it in
|
|
9
|
+
* JavaScript. The transition is off under `prefers-reduced-motion`.
|
|
11
10
|
*
|
|
12
|
-
*
|
|
11
|
+
* You can use an item on its own as a disclosure, with no accordion around it.
|
|
13
12
|
*
|
|
14
13
|
* @since 0.1.0
|
|
15
14
|
* @status stable
|
|
16
15
|
* @aliases Collapsible, Expander, Disclosure
|
|
17
16
|
* @documentation https://fusion.dev/helix/components/accordion
|
|
18
17
|
*
|
|
19
|
-
* @slot - The content
|
|
20
|
-
* @slot summary - The
|
|
18
|
+
* @slot - The content shown when the section is open.
|
|
19
|
+
* @slot summary - The text of the button that opens and closes the section. Always shown.
|
|
21
20
|
*
|
|
22
21
|
* @csspart chevron - The open and close indicator.
|
|
23
22
|
* @csspart container - The outer wrapper.
|
|
24
|
-
* @csspart content - The
|
|
25
|
-
* @csspart content-inner - The clipping box inside the animated region. The
|
|
26
|
-
* @csspart trigger - The
|
|
23
|
+
* @csspart content - The region that holds the content.
|
|
24
|
+
* @csspart content-inner - The clipping box inside the animated region. The padding is on the slot inside it, so a closed section leaves no space.
|
|
25
|
+
* @csspart trigger - The button that opens and closes the section, holding the summary.
|
|
27
26
|
*
|
|
28
|
-
* @cssproperty --accordion-item-padding -
|
|
27
|
+
* @cssproperty --accordion-item-padding - The padding of the trigger and the content.
|
|
29
28
|
*/
|
|
30
29
|
export declare class HelixAccordionItem extends HelixHeadlessAccordionItem {
|
|
31
30
|
static styles: CSSResultGroup;
|
|
@@ -1,13 +1,11 @@
|
|
|
1
1
|
import { HelixHeadlessAccordion } from '@fusion.dev/helix-headless/accordion';
|
|
2
2
|
import type { CSSResultGroup } from 'lit';
|
|
3
3
|
/**
|
|
4
|
-
* @summary
|
|
4
|
+
* @summary A group of collapsible sections.
|
|
5
5
|
*
|
|
6
6
|
* @description
|
|
7
|
-
*
|
|
8
|
-
*
|
|
9
|
-
* carry the grouping, which is why the surrounding frame is opt-in rather than
|
|
10
|
-
* the default: an accordion is a list, where a card is a surface.
|
|
7
|
+
* Neighboring items share one line, so the line between two items is one pixel
|
|
8
|
+
* wide. The lines show the grouping, so a frame around each item is opt-in.
|
|
11
9
|
*
|
|
12
10
|
* @since 0.1.0
|
|
13
11
|
* @status stable
|
|
@@ -17,13 +15,14 @@ import type { CSSResultGroup } from 'lit';
|
|
|
17
15
|
*
|
|
18
16
|
* @slot - The accordion's items.
|
|
19
17
|
*
|
|
20
|
-
* @cssproperty --accordion-border-color -
|
|
21
|
-
* @cssproperty --accordion-gap -
|
|
22
|
-
* @cssproperty --accordion-radius -
|
|
18
|
+
* @cssproperty --accordion-border-color - The color of the lines between items, and of each item's border when outlined.
|
|
19
|
+
* @cssproperty --accordion-gap - The space between items when outlined. Otherwise items share an edge.
|
|
20
|
+
* @cssproperty --accordion-radius - The corner radius of each item when outlined.
|
|
23
21
|
*/
|
|
24
22
|
export declare class HelixAccordion extends HelixHeadlessAccordion {
|
|
25
23
|
/**
|
|
26
|
-
* How the
|
|
24
|
+
* How the items are set off from the page. `plain` draws a line between
|
|
25
|
+
* items, and `outlined` draws a border around each item.
|
|
27
26
|
*
|
|
28
27
|
* Two of the axis's four values, which is what this surface has meaning for:
|
|
29
28
|
* a stack of items is already told apart by its seams, so a lift would be a
|
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
import { HelixHeadlessAnnouncement } from '@fusion.dev/helix-headless/announcement';
|
|
2
2
|
import type { CSSResultGroup } from 'lit';
|
|
3
3
|
/**
|
|
4
|
-
* @summary A page
|
|
4
|
+
* @summary A message for the whole page, shown above its header, that can be dismissed.
|
|
5
5
|
*
|
|
6
6
|
* @description
|
|
7
|
-
* Full width and flat
|
|
8
|
-
*
|
|
9
|
-
*
|
|
7
|
+
* Full width and flat. The tone is a tinted fill and a hairline along the
|
|
8
|
+
* bottom edge, with no border on the other sides, so the announcement is a band
|
|
9
|
+
* across the top of the page.
|
|
10
10
|
*
|
|
11
11
|
* @since 0.1.0
|
|
12
12
|
* @status stable
|
|
@@ -14,12 +14,12 @@ import type { CSSResultGroup } from 'lit';
|
|
|
14
14
|
* @aliases Banner, Notification bar, Alert bar
|
|
15
15
|
* @documentation https://fusion.dev/helix/components/announcement
|
|
16
16
|
*
|
|
17
|
-
* @cssproperty --announcement-block-size -
|
|
18
|
-
* @cssproperty --announcement-inset -
|
|
17
|
+
* @cssproperty --announcement-block-size - The band's minimum height, so adding a control to it does not move the page down. A message long enough to wrap makes the band taller.
|
|
18
|
+
* @cssproperty --announcement-inset - The inline padding, matched to the page.
|
|
19
19
|
*/
|
|
20
20
|
export declare class HelixAnnouncement extends HelixHeadlessAnnouncement {
|
|
21
21
|
/**
|
|
22
|
-
*
|
|
22
|
+
* The surface level the band sits on.
|
|
23
23
|
*
|
|
24
24
|
* `filled` is the resting one, a well sunk below the page. `elevated` brings
|
|
25
25
|
* it up to the surface step, for a band that reads as part of the furniture
|
|
@@ -4,16 +4,18 @@ import type { CSSResultGroup } from 'lit';
|
|
|
4
4
|
* @summary Page-level banner holding brand, navigation, and actions.
|
|
5
5
|
*
|
|
6
6
|
* @description
|
|
7
|
-
*
|
|
8
|
-
*
|
|
9
|
-
* page rather than about the bar, and `material` because a backdrop filter
|
|
10
|
-
* makes the header a containing block for `position: fixed` descendants, so an
|
|
11
|
-
* overlay rendered inside a material header is placed against the header rather
|
|
12
|
-
* than the viewport.
|
|
7
|
+
* The header is flat, opaque, and in the document flow. Two behaviors are
|
|
8
|
+
* opt-in:
|
|
13
9
|
*
|
|
14
|
-
*
|
|
15
|
-
*
|
|
16
|
-
*
|
|
10
|
+
* - `sticky` keeps the header in view while the page scrolls. Whether it should
|
|
11
|
+
* follow the page is a decision about the page.
|
|
12
|
+
* - `material` adds a backdrop filter. The filter makes the header a containing
|
|
13
|
+
* block for `position: fixed` descendants, so an overlay rendered inside a
|
|
14
|
+
* material header is positioned against the header.
|
|
15
|
+
*
|
|
16
|
+
* A separating rule appears once the page has scrolled, so the header sits flat
|
|
17
|
+
* against a hero and lifts off the content afterwards. The header has no
|
|
18
|
+
* shadow.
|
|
17
19
|
*
|
|
18
20
|
* @since 0.1.0
|
|
19
21
|
* @status stable
|
|
@@ -27,7 +29,7 @@ import type { CSSResultGroup } from 'lit';
|
|
|
27
29
|
*
|
|
28
30
|
* @csspart content - The centered row inside the banner.
|
|
29
31
|
*
|
|
30
|
-
* @cssproperty --app-header-backdrop - The filter behind
|
|
32
|
+
* @cssproperty --app-header-backdrop - The filter behind the banner. Set it to `none` when you pair the header with a panel.
|
|
31
33
|
* @cssproperty --app-header-background-color - Fill behind the banner.
|
|
32
34
|
* @cssproperty --app-header-block-size - Height of the banner.
|
|
33
35
|
* @cssproperty --app-header-border-color - The line under the bar. None by default.
|
|
@@ -36,8 +38,8 @@ import type { CSSResultGroup } from 'lit';
|
|
|
36
38
|
*/
|
|
37
39
|
export declare class HelixAppHeader extends HelixHeadlessAppHeader {
|
|
38
40
|
/**
|
|
39
|
-
* What the banner is made of, which
|
|
40
|
-
* through.
|
|
41
|
+
* What the banner is made of, which sets how much of the page behind it
|
|
42
|
+
* shows through.
|
|
41
43
|
*
|
|
42
44
|
* One axis, and absent is opaque, per the rule that a reflected property
|
|
43
45
|
* takes no default.
|
|
@@ -2,40 +2,28 @@ import { HelixHeadlessAreaChart } from '@fusion.dev/helix-headless/area-chart';
|
|
|
2
2
|
import type { CSSResultGroup } from 'lit';
|
|
3
3
|
import '../../tooltip/index.js';
|
|
4
4
|
/**
|
|
5
|
-
* @summary
|
|
5
|
+
* @summary A chart that shows how a total is made up over time, as bands stacked on one another.
|
|
6
6
|
*
|
|
7
7
|
* @description
|
|
8
|
-
* The bands take the series palette in order, the first column at the
|
|
9
|
-
* so a legend
|
|
8
|
+
* The bands take the series palette in order, with the first column at the
|
|
9
|
+
* bottom, so a legend lists them in stacking order.
|
|
10
10
|
*
|
|
11
|
-
* Each band is a pale fill with its top edge
|
|
12
|
-
*
|
|
13
|
-
*
|
|
14
|
-
* others through it.
|
|
11
|
+
* Each band is a pale fill with its top edge in the series' full color. The
|
|
12
|
+
* fills are mixed toward the page background, because translucent bands would
|
|
13
|
+
* show each other where they overlap.
|
|
15
14
|
*
|
|
16
|
-
* **
|
|
17
|
-
* Both refusals are geometric and both were argued in the stylesheet before
|
|
18
|
-
* they were argued anywhere a reader looks.
|
|
15
|
+
* **The chart supports neither the `emphasis` nor the `material` axis.**
|
|
19
16
|
*
|
|
20
|
-
* `emphasis
|
|
21
|
-
*
|
|
22
|
-
*
|
|
23
|
-
*
|
|
24
|
-
*
|
|
25
|
-
*
|
|
26
|
-
*
|
|
27
|
-
* fill to the series' own color, which is the edge's color, so the boundary
|
|
28
|
-
* disappears into the band it bounds. `LineChart` can take the axis because its
|
|
29
|
-
* wash is optional there, `area` deciding whether one is drawn at all.
|
|
17
|
+
* - `emphasis`: the fill shows the value and the edge shows the boundary, and
|
|
18
|
+
* both need to stay. `outlined` would thin the fill into cumulative lines,
|
|
19
|
+
* which is `LineChart`. `solid` would fill the band in the edge color, so the
|
|
20
|
+
* boundary would disappear.
|
|
21
|
+
* - `material`: a band covers everything under its top edge, so a translucent
|
|
22
|
+
* band would show the bands behind it as a color outside the palette.
|
|
23
|
+
* `LineChart` has no `wash` for the same reason.
|
|
30
24
|
*
|
|
31
|
-
*
|
|
32
|
-
*
|
|
33
|
-
* down covering the rest, so a translucent band shows the bands behind it and
|
|
34
|
-
* reads as a third color that is in no palette. That is `LineChart`'s recorded
|
|
35
|
-
* reason for refusing `wash`, met here from the other side. The strength of a
|
|
36
|
-
* fill is still adjustable and is `--area-chart-fill-strength`, which is a
|
|
37
|
-
* continuum rather than an axis and is a theme's business rather than a
|
|
38
|
-
* reader's.
|
|
25
|
+
* To change the strength of the fills, set `--area-chart-fill-strength` in your
|
|
26
|
+
* theme.
|
|
39
27
|
*
|
|
40
28
|
* @since 0.1.0
|
|
41
29
|
* @status stable
|
|
@@ -47,12 +35,15 @@ import '../../tooltip/index.js';
|
|
|
47
35
|
* @cssproperty --area-chart-block-size - Height of the drawing.
|
|
48
36
|
* @cssproperty --area-chart-fill-strength - How much of its series' color a band takes, as a percentage mixed toward the page.
|
|
49
37
|
* @cssproperty --area-chart-gap - Space between the drawing and its labels.
|
|
50
|
-
* @cssproperty --area-chart-gridline-color -
|
|
51
|
-
* @cssproperty --area-chart-width - Thickness of a band's top edge
|
|
52
|
-
* @cssproperty --chart-stroke - Thickness of a band's top edge
|
|
38
|
+
* @cssproperty --area-chart-gridline-color - Color of the rules drawn across the plot under `gridlines`.
|
|
39
|
+
* @cssproperty --area-chart-width - Thickness of a band's top edge. Overrides `--chart-stroke`.
|
|
40
|
+
* @cssproperty --chart-stroke - Thickness of a band's top edge. Area Chart, Line Chart, and Bar Chart's `lines` all read this one property. `--area-chart-width` overrides it here.
|
|
53
41
|
*/
|
|
54
42
|
export declare class HelixAreaChart extends HelixHeadlessAreaChart {
|
|
55
|
-
/**
|
|
43
|
+
/**
|
|
44
|
+
* The tag prefix for child elements. Set to the styled tier, so the chart
|
|
45
|
+
* renders the styled tooltip.
|
|
46
|
+
*/
|
|
56
47
|
static tier: string;
|
|
57
48
|
static styles: CSSResultGroup;
|
|
58
49
|
}
|
|
@@ -1,37 +1,37 @@
|
|
|
1
1
|
import { HelixElement } from '@fusion.dev/helix-core';
|
|
2
2
|
import type { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
|
|
3
3
|
/**
|
|
4
|
-
* @summary A
|
|
4
|
+
* @summary A drifting background of light, drawn in your theme's colors.
|
|
5
5
|
*
|
|
6
6
|
* @description
|
|
7
|
-
* One fragment shader over a full-screen triangle,
|
|
8
|
-
* the tokens
|
|
9
|
-
*
|
|
10
|
-
* `--helix-color-primary` is a consequence of it.
|
|
7
|
+
* One fragment shader draws over a full-screen triangle, and its palette comes
|
|
8
|
+
* from the tokens. A background built on `--helix-color-primary` changes when
|
|
9
|
+
* your brand color changes.
|
|
11
10
|
*
|
|
12
|
-
*
|
|
13
|
-
*
|
|
14
|
-
*
|
|
15
|
-
*
|
|
16
|
-
*
|
|
17
|
-
*
|
|
11
|
+
* Every shape ramps through four token stops, and the token layer inverts each
|
|
12
|
+
* one: the page background, `primary-subtle`, `primary`, and a peak. The peak
|
|
13
|
+
* is the foreground on a dark page and `primary-active` on a light one, because
|
|
14
|
+
* mixing a saturated hue toward near-black removes its chroma. The component
|
|
15
|
+
* reads which way the page runs from the background's luminance, because the
|
|
16
|
+
* mode is a private token.
|
|
18
17
|
*
|
|
19
|
-
*
|
|
20
|
-
*
|
|
18
|
+
* The geometry is three vertices derived from `gl_VertexID`. There is no
|
|
19
|
+
* dependency, scene graph, attribute, buffer, or upload.
|
|
21
20
|
*
|
|
22
|
-
*
|
|
23
|
-
*
|
|
24
|
-
*
|
|
25
|
-
*
|
|
21
|
+
* The shader stops drawing in these cases:
|
|
22
|
+
* - The element is off screen or in a background tab.
|
|
23
|
+
* - `prefers-reduced-motion` is set. The element shows one still frame.
|
|
24
|
+
* - The browser takes back the drawing context, on a GPU reset or past its
|
|
25
|
+
* limit of about sixteen contexts. The gradient shows until the context
|
|
26
|
+
* returns.
|
|
26
27
|
*
|
|
27
|
-
*
|
|
28
|
-
*
|
|
29
|
-
*
|
|
30
|
-
* a field drawn from the same tokens the gradient already ramps.
|
|
28
|
+
* On a renderer that draws on the CPU, such as a headless browser or a machine
|
|
29
|
+
* with no usable GPU, the element shows the gradient. There the shader costs
|
|
30
|
+
* about 450ms for the first frame of each element, against 2ms on a GPU.
|
|
31
31
|
*
|
|
32
|
-
*
|
|
33
|
-
* allow
|
|
34
|
-
*
|
|
32
|
+
* Aura is styled only and has behavior, which the tier split does not otherwise
|
|
33
|
+
* allow. Its behavior is drawing to a canvas, so there is no structure for you
|
|
34
|
+
* to restyle and nothing for a headless version to hold.
|
|
35
35
|
*
|
|
36
36
|
* @since 0.1.0
|
|
37
37
|
* @status stable
|
|
@@ -67,7 +67,8 @@ export declare class HelixAura extends HelixElement {
|
|
|
67
67
|
*/
|
|
68
68
|
gain: number;
|
|
69
69
|
/**
|
|
70
|
-
* What the pointer does
|
|
70
|
+
* What the pointer does to the field. Set it to override the default for the
|
|
71
|
+
* `variant`.
|
|
71
72
|
*
|
|
72
73
|
* Absent is `native`, which is each shape answering in the terms it is made
|
|
73
74
|
* of: braid leans, rays are occluded, threads pinch, particles scatter. The
|
|
@@ -133,11 +134,11 @@ export declare class HelixAura extends HelixElement {
|
|
|
133
134
|
*/
|
|
134
135
|
tilt: number;
|
|
135
136
|
/**
|
|
136
|
-
* How much the members of a population differ from one another, `0
|
|
137
|
-
*
|
|
138
|
-
*
|
|
139
|
-
*
|
|
140
|
-
*
|
|
137
|
+
* How much the members of a population differ from one another, from `0`,
|
|
138
|
+
* where they are uniform, to `1`, the default amount. Values are clamped to
|
|
139
|
+
* that range, because they interpolate: a larger number would extrapolate,
|
|
140
|
+
* and a streak whose length passed through zero would be drawn as a bar
|
|
141
|
+
* across the whole frame.
|
|
141
142
|
*
|
|
142
143
|
* Read by six of the eleven shapes, the ones made of many similar things,
|
|
143
144
|
* whether those are counted or continuous: `streaks`, whose lanes draw a
|
|
@@ -159,7 +160,7 @@ export declare class HelixAura extends HelixElement {
|
|
|
159
160
|
*/
|
|
160
161
|
variance: number;
|
|
161
162
|
/**
|
|
162
|
-
*
|
|
163
|
+
* The form the light takes. When it is not set, the form is `braid`.
|
|
163
164
|
*
|
|
164
165
|
* Reflected because the fallback gradient selects on it, and given no default
|
|
165
166
|
* for the same reason every axis here has none: a default on a reflected
|
|
@@ -4,17 +4,14 @@ import type { CSSResultGroup } from 'lit';
|
|
|
4
4
|
* @summary Overlapping avatars, with a count for the ones not shown.
|
|
5
5
|
*
|
|
6
6
|
* @description
|
|
7
|
-
*
|
|
8
|
-
*
|
|
9
|
-
*
|
|
10
|
-
* reads as one shape rather than several: the ring is what makes the edge of
|
|
11
|
-
* each avatar visible against the one behind it.
|
|
7
|
+
* Avatars overlap by one step of space, so they read as a stack and each face
|
|
8
|
+
* stays visible. Each avatar has a ring in the page background color, which
|
|
9
|
+
* marks its edge against the avatar behind it.
|
|
12
10
|
*
|
|
13
|
-
* Each avatar is drawn over the one before it,
|
|
14
|
-
*
|
|
15
|
-
*
|
|
16
|
-
*
|
|
17
|
-
* its markup is the worse trade of the two.
|
|
11
|
+
* Each avatar is drawn over the one before it, in document order, with no
|
|
12
|
+
* `z-index`. The group does not use `row-reverse` to put the first avatar on
|
|
13
|
+
* top, because that also reverses the visual order: the person written first
|
|
14
|
+
* would appear last.
|
|
18
15
|
*
|
|
19
16
|
* @since 0.1.0
|
|
20
17
|
* @status stable
|
|
@@ -22,7 +19,7 @@ import type { CSSResultGroup } from 'lit';
|
|
|
22
19
|
* @documentation https://fusion.dev/helix/components/avatar
|
|
23
20
|
*
|
|
24
21
|
* @cssproperty --avatar-group-overlap - How far each avatar sits over the one before it.
|
|
25
|
-
* @cssproperty --avatar-group-ring-color -
|
|
22
|
+
* @cssproperty --avatar-group-ring-color - Color of the ring that separates one avatar from the next.
|
|
26
23
|
*/
|
|
27
24
|
export declare class HelixAvatarGroup extends HelixHeadlessAvatarGroup {
|
|
28
25
|
static styles: CSSResultGroup;
|
|
@@ -1,13 +1,12 @@
|
|
|
1
1
|
import { HelixHeadlessAvatar } from '@fusion.dev/helix-headless/avatar';
|
|
2
2
|
import type { CSSResultGroup } from 'lit';
|
|
3
3
|
/**
|
|
4
|
-
* @summary
|
|
4
|
+
* @summary A person or entity, shown as an image or as their initials.
|
|
5
5
|
*
|
|
6
6
|
* @description
|
|
7
|
-
*
|
|
8
|
-
*
|
|
9
|
-
*
|
|
10
|
-
* `--avatar-size`.
|
|
7
|
+
* The font size of the initials is set in `em` against the avatar's own
|
|
8
|
+
* dimension, so the initials scale with every size, including a size you set
|
|
9
|
+
* through `--avatar-size`.
|
|
11
10
|
*
|
|
12
11
|
* @since 0.1.0
|
|
13
12
|
* @status stable
|
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
import { HelixHeadlessBadge } from '@fusion.dev/helix-headless/badge';
|
|
2
2
|
import type { CSSResultGroup } from 'lit';
|
|
3
3
|
/**
|
|
4
|
-
* @summary
|
|
4
|
+
* @summary A count or a dot pinned to the corner of another element.
|
|
5
5
|
*
|
|
6
6
|
* @description
|
|
7
|
-
* The indicator
|
|
8
|
-
*
|
|
9
|
-
*
|
|
7
|
+
* The indicator has a ring in the page background color, so it stays legible
|
|
8
|
+
* where it overlaps the element it is pinned to, such as a dark badge on a dark
|
|
9
|
+
* icon.
|
|
10
10
|
*
|
|
11
11
|
* @since 0.1.0
|
|
12
12
|
* @status stable
|
|
@@ -14,14 +14,13 @@ import type { CSSResultGroup } from 'lit';
|
|
|
14
14
|
* @aliases Count, Indicator, Pip
|
|
15
15
|
* @documentation https://fusion.dev/helix/components/badge
|
|
16
16
|
*
|
|
17
|
-
* @cssproperty --badge-background-color -
|
|
17
|
+
* @cssproperty --badge-background-color - The fill of the indicator.
|
|
18
18
|
* @cssproperty --badge-offset - Pulls the mark in from the corner, along both axes.
|
|
19
|
-
* @cssproperty --badge-ring-color - The ring
|
|
19
|
+
* @cssproperty --badge-ring-color - The color of the ring between the indicator and what is behind it.
|
|
20
20
|
*/
|
|
21
21
|
export declare class HelixBadge extends HelixHeadlessBadge {
|
|
22
22
|
/**
|
|
23
|
-
* What the mark means
|
|
24
|
-
* from what the count *is*.
|
|
23
|
+
* What the mark means. The stylesheet picks the fill from it.
|
|
25
24
|
*
|
|
26
25
|
* **`Tag`'s vocabulary, because a badge is the same kind of thing.** Both are
|
|
27
26
|
* a small mark carrying a meaning beside something else, and the two had
|
|
@@ -2,13 +2,13 @@ import { HelixHeadlessBarChart } from '@fusion.dev/helix-headless/bar-chart';
|
|
|
2
2
|
import type { CSSResultGroup, PropertyValues } from 'lit';
|
|
3
3
|
import '../../tooltip/index.js';
|
|
4
4
|
/**
|
|
5
|
-
* @summary
|
|
5
|
+
* @summary A chart that draws a table's categories as columns.
|
|
6
6
|
*
|
|
7
7
|
* @description
|
|
8
|
-
* The columns take the series palette in order, so a chart
|
|
9
|
-
* and a chart
|
|
10
|
-
*
|
|
11
|
-
*
|
|
8
|
+
* The columns take the series palette in order, so a chart with one series uses
|
|
9
|
+
* the first color and a chart with four uses the first four. Only the end away
|
|
10
|
+
* from the baseline is rounded, so each column sits flat on the rule it is
|
|
11
|
+
* measured from.
|
|
12
12
|
*
|
|
13
13
|
* @since 0.1.0
|
|
14
14
|
* @status stable
|
|
@@ -17,20 +17,20 @@ import '../../tooltip/index.js';
|
|
|
17
17
|
* @aliases Column Chart, Categorical Chart
|
|
18
18
|
* @documentation https://fusion.dev/helix/components/bar-chart
|
|
19
19
|
*
|
|
20
|
-
* @cssproperty --bar-chart-band-color -
|
|
20
|
+
* @cssproperty --bar-chart-band-color - Fill of the category band under the pointer.
|
|
21
21
|
* @cssproperty --bar-chart-bar-radius - Corner radius at the far end of a column.
|
|
22
22
|
* @cssproperty --bar-chart-bar-stroke - Width of the edge an `outlined` or `subtle`
|
|
23
23
|
* column is drawn with.
|
|
24
24
|
* @cssproperty --bar-chart-block-size - Height of the drawing.
|
|
25
25
|
* @cssproperty --bar-chart-gap - Space between the drawing and its labels.
|
|
26
|
-
* @cssproperty --bar-chart-gridline-color -
|
|
27
|
-
* @cssproperty --bar-chart-line-color -
|
|
28
|
-
* @cssproperty --bar-chart-line-width - Thickness of a `lines` series
|
|
29
|
-
* @cssproperty --chart-stroke - Thickness of a `lines` series
|
|
26
|
+
* @cssproperty --bar-chart-gridline-color - Color of the gridlines drawn by `gridlines`.
|
|
27
|
+
* @cssproperty --bar-chart-line-color - Color of a `lines` series. Overrides its series color.
|
|
28
|
+
* @cssproperty --bar-chart-line-width - Thickness of a `lines` series. Overrides `--chart-stroke`.
|
|
29
|
+
* @cssproperty --chart-stroke - Thickness of a `lines` series. Bar Chart, Line Chart, and the top edge of Area Chart share this property. `--bar-chart-line-width` overrides it here.
|
|
30
30
|
*/
|
|
31
31
|
export declare class HelixBarChart extends HelixHeadlessBarChart {
|
|
32
32
|
/**
|
|
33
|
-
* **The styled tier, so the
|
|
33
|
+
* **The styled tier, so the chart renders the styled tooltip.**
|
|
34
34
|
*
|
|
35
35
|
* `tag()` builds a child's tag name from this prefix, and the base declares
|
|
36
36
|
* `helix-headless-`. Without this override the chart puts a
|
|
@@ -41,7 +41,7 @@ export declare class HelixBarChart extends HelixHeadlessBarChart {
|
|
|
41
41
|
*/
|
|
42
42
|
static tier: string;
|
|
43
43
|
/**
|
|
44
|
-
* How
|
|
44
|
+
* How strongly the columns are drawn.
|
|
45
45
|
*
|
|
46
46
|
* The chart's treatment, which every series takes unless `outlined` or
|
|
47
47
|
* `subtle` names it. `outlined` is the mark as its edge alone, `subtle` a wash
|
|
@@ -63,7 +63,7 @@ export declare class HelixBarChart extends HelixHeadlessBarChart {
|
|
|
63
63
|
*/
|
|
64
64
|
emphasis?: 'outlined' | 'solid' | 'subtle';
|
|
65
65
|
/**
|
|
66
|
-
*
|
|
66
|
+
* The names of the series drawn in glass.
|
|
67
67
|
*
|
|
68
68
|
* Matched the way `outlined` is, against the column headings the table gives.
|
|
69
69
|
*
|
|
@@ -76,7 +76,8 @@ export declare class HelixBarChart extends HelixHeadlessBarChart {
|
|
|
76
76
|
*/
|
|
77
77
|
glass?: string;
|
|
78
78
|
/**
|
|
79
|
-
*
|
|
79
|
+
* The material the columns are drawn in. Leave it unset for solid columns, or
|
|
80
|
+
* set `glass` or `frosted`.
|
|
80
81
|
*
|
|
81
82
|
* **A third axis on the chart, not on the bar.** A bar is a mark inside a
|
|
82
83
|
* drawing and nobody writes markup for one; the chart is what a consumer
|
|
@@ -114,7 +115,7 @@ export declare class HelixBarChart extends HelixHeadlessBarChart {
|
|
|
114
115
|
*/
|
|
115
116
|
material?: 'frosted' | 'glass';
|
|
116
117
|
/**
|
|
117
|
-
*
|
|
118
|
+
* The names of the series drawn as an outline.
|
|
118
119
|
*
|
|
119
120
|
* Separated by whitespace or commas and matched against the column headings
|
|
120
121
|
* the table gives, the way `lines` and `secondary` are, so a chart says
|
|
@@ -137,7 +138,7 @@ export declare class HelixBarChart extends HelixHeadlessBarChart {
|
|
|
137
138
|
*/
|
|
138
139
|
outlined?: string;
|
|
139
140
|
/**
|
|
140
|
-
*
|
|
141
|
+
* The names of the series drawn as a wash of their color.
|
|
141
142
|
*
|
|
142
143
|
* Matched as `outlined` is.
|
|
143
144
|
*/
|
|
@@ -4,10 +4,9 @@ import type { CSSResultGroup } from 'lit';
|
|
|
4
4
|
* @summary A passage set off from the prose around it.
|
|
5
5
|
*
|
|
6
6
|
* @description
|
|
7
|
-
* Set larger than body text
|
|
8
|
-
*
|
|
9
|
-
*
|
|
10
|
-
* top of that are the same thing said twice.
|
|
7
|
+
* Set in the display face, larger than body text, to mark a change of voice. No
|
|
8
|
+
* quotation marks are drawn, because the size and spacing already set the
|
|
9
|
+
* passage apart.
|
|
11
10
|
*
|
|
12
11
|
* @since 0.1.0
|
|
13
12
|
* @status stable
|
|
@@ -15,7 +14,7 @@ import type { CSSResultGroup } from 'lit';
|
|
|
15
14
|
* @aliases Pullquote, Citation, Excerpt
|
|
16
15
|
* @documentation https://fusion.dev/helix/components/blockquote
|
|
17
16
|
*
|
|
18
|
-
* @cssproperty --blockquote-size -
|
|
17
|
+
* @cssproperty --blockquote-size - The font size of the quoted passage.
|
|
19
18
|
*/
|
|
20
19
|
export declare class HelixBlockquote extends HelixHeadlessBlockquote {
|
|
21
20
|
static styles: CSSResultGroup;
|
|
@@ -4,14 +4,14 @@ import type { CSSResultGroup } from 'lit';
|
|
|
4
4
|
* @summary One step in a breadcrumb trail.
|
|
5
5
|
*
|
|
6
6
|
* @description
|
|
7
|
-
* The separator is hidden on the first
|
|
8
|
-
*
|
|
7
|
+
* The separator is hidden on the first crumb with `:host(:first-child)`, so no
|
|
8
|
+
* crumb needs its index and the parent needs no coordination.
|
|
9
9
|
*
|
|
10
|
-
* The link carries `data-link="quiet"`, the recipe navigation uses
|
|
11
|
-
* else, which
|
|
12
|
-
* button
|
|
13
|
-
* text-decoration on an anchor
|
|
14
|
-
* and
|
|
10
|
+
* The link carries `data-link="quiet"`, the link recipe navigation uses
|
|
11
|
+
* everywhere else, which sets its color. Under the pointer it looks like a
|
|
12
|
+
* subtle button, and that style is set inside the crumb. The base layer sets
|
|
13
|
+
* only color and text-decoration on an anchor, so your styles win for those,
|
|
14
|
+
* and the box and background come from `::slotted`.
|
|
15
15
|
*
|
|
16
16
|
* @since 0.1.0
|
|
17
17
|
* @status stable
|
|
@@ -4,8 +4,8 @@ import type { CSSResultGroup } from 'lit';
|
|
|
4
4
|
* @summary Shows the path to the current page.
|
|
5
5
|
*
|
|
6
6
|
* @description
|
|
7
|
-
*
|
|
8
|
-
*
|
|
7
|
+
* The trail is a single line by default and wraps onto a second line when it
|
|
8
|
+
* runs out of room, so every crumb stays visible.
|
|
9
9
|
*
|
|
10
10
|
* @since 0.1.0
|
|
11
11
|
* @status stable
|