@fusion.dev/helix 0.161.0 → 0.162.0

package/dist/strands/stop/strands-stop.css.js

@@ -0,0 +1,2 @@
+import { createSheet } from '@fusion.dev/helix-core';
+export const styles = createSheet(`:host {display: none;}@media print {:host {display: none;}}`);

package/dist/strands/stop/strands-stop.d.ts

@@ -0,0 +1,44 @@
+import { HelixElement } from '@fusion.dev/helix-core';
+import type { CSSResultGroup } from 'lit';
+import { nothing } from 'lit';
+import type { StrandsVariant } from '../path.js';
+/**
+ * @summary Pins a form of the ribbon to a section of the page.
+ *
+ * @description
+ * Placed inside a `helix-strands` with `travel`, a stop names an element with
+ * `for` and says which form the ribbon takes when the page reaches it: a `fan`
+ * bending through it, a `ribbon` passing through `at`, or `waves` crossing at
+ * its top edge. The stops are read in page order, whatever order they are
+ * written in, and a stop naming no element is skipped.
+ *
+ * A stop draws nothing itself and is never shown.
+ *
+ * **Every property is reflected**, because the parent watches its stops'
+ * attributes to lay the ribbon out again: a change made from script reaches the
+ * page as a change made in markup does. None has a default, so a stop writes
+ * nothing it was not given.
+ *
+ * @since 0.147.0
+ * @status experimental
+ * @documentation https://fusion.dev/helix/components/strands
+ */
+export declare class HelixStrandsStop extends HelixElement {
+    static styles: CSSResultGroup;
+    /**
+     * Where the form sits across the page, as a share of the width: the fan's
+     * bend or the ribbon's axis. A wave crosses the whole width and does not
+     * read it. Unset, a fan bends at `0.4` and a ribbon runs down the middle.
+     */
+    at?: number;
+    /** The id of the element the form is pinned to, in the same tree as the stop. */
+    for?: string;
+    /** The form the ribbon takes at the element. When it is not set, the form is `ribbon`. */
+    variant?: StrandsVariant;
+    protected render(): typeof nothing;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-strands-stop': HelixStrandsStop;
+    }
+}

package/dist/strands/stop/strands-stop.js

@@ -0,0 +1,29 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { customElement, HelixElement } from '@fusion.dev/helix-core';
+import { nothing } from 'lit';
+import { property } from 'lit/decorators.js';
+import { styles } from './strands-stop.css.js';
+let HelixStrandsStop = class HelixStrandsStop extends HelixElement {
+    static { this.styles = styles; }
+    render() {
+        return nothing;
+    }
+};
+__decorate([
+    property({ reflect: true, type: Number })
+], HelixStrandsStop.prototype, "at", void 0);
+__decorate([
+    property({ reflect: true })
+], HelixStrandsStop.prototype, "for", void 0);
+__decorate([
+    property({ reflect: true })
+], HelixStrandsStop.prototype, "variant", void 0);
+HelixStrandsStop = __decorate([
+    customElement('helix-strands-stop')
+], HelixStrandsStop);
+export { HelixStrandsStop };