@fusion.dev/helix 0.2.0 → 0.4.0

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

@@ -1,4 +1,3 @@
-// Generated from src/accordion/item/accordion-item.css by `turbo run styles`. Do not edit.
 import { createSheet } from '@fusion.dev/helix-core';
 export const styles = createSheet(`:host {
 display: block;

package/dist/accordion/item/accordion-item.js

@@ -7,35 +7,6 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { customElement } from '@fusion.dev/helix-core';
 import { HelixHeadlessAccordionItem } from '@fusion.dev/helix-headless/accordion';
 import { styles } from './accordion-item.css.js';
-/**
- * @summary One collapsible section of an accordion.
- *
- * @description
- * The open and close transition animates `grid-template-rows` from `0fr` to
- * `1fr`, which is the only technique that reaches the content's intrinsic
- * height without measuring it in JavaScript. It is disabled under
- * `prefers-reduced-motion`.
- *
- * Usable on its own as a disclosure, with no accordion around it.
- *
- * @since 0.1.0
- * @status experimental
- * @aliases Collapsible, Expander, Disclosure
- * @documentation https://helix.fusion.dev/components/accordion
- *
- * @slot - The content revealed when open.
- * @slot summary - The always-visible trigger content.
- *
- * @event {HelixBeforeOpenEvent} helix-before-open - Fired before the item opens or closes. Cancelable: refusing it takes the decision and nothing moves.
- *
- * @csspart chevron - The open and close indicator.
- * @csspart container - The outer wrapper.
- * @csspart content - The revealed region.
- * @csspart content-inner - Padding wrapper inside the animated region.
- * @csspart trigger - The clickable summary row.
- *
- * @cssproperty --accordion-item-padding - Inset of the trigger and content.
- */
 let HelixAccordionItem = class HelixAccordionItem extends HelixHeadlessAccordionItem {
     static { this.styles = styles; }
 };

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

@@ -1,4 +1,3 @@
-// Generated from src/accordion/root/accordion-root.css by `turbo run styles`. Do not edit.
 import { createSheet } from '@fusion.dev/helix-core';
 export const styles = createSheet(`:host {
 display: block;

package/dist/accordion/root/accordion-root.js

@@ -8,26 +8,6 @@ import { customElement } from '@fusion.dev/helix-core';
 import { HelixHeadlessAccordion } from '@fusion.dev/helix-headless/accordion';
 import { property } from 'lit/decorators.js';
 import { styles } from './accordion-root.css.js';
-/**
- * @summary Groups collapsible sections, one open at a time by default.
- *
- * @description
- * Items share one rule between neighbors rather than each drawing its own, so
- * the seam between two items is one pixel and not two. Those seams are what
- * carry the grouping, which is why the surrounding frame is opt-in rather than
- * the default: an accordion is a list, where a card is a surface.
- *
- * @since 0.1.0
- * @status experimental
- * @category layout
- * @aliases Collapse, Expander group
- * @documentation https://helix.fusion.dev/components/accordion
- *
- * @slot - The accordion's items.
- *
- * @cssproperty --accordion-border-color - Color of the seams, and of the frame when outlined.
- * @cssproperty --accordion-radius - Corner radius of the stack, when outlined.
- */
 let HelixAccordion = class HelixAccordion extends HelixHeadlessAccordion {
     static { this.styles = styles; }
 };

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

@@ -1,4 +1,3 @@
-// Generated from src/announcement/root/announcement-root.css by `turbo run styles`. Do not edit.
 import { createSheet } from '@fusion.dev/helix-core';
 export const styles = createSheet(`:host {
 

package/dist/announcement/root/announcement-root.js

@@ -7,22 +7,6 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { customElement } from '@fusion.dev/helix-core';
 import { HelixHeadlessAnnouncement } from '@fusion.dev/helix-headless/announcement';
 import { styles } from './announcement-root.css.js';
-/**
- * @summary A page-level message above the masthead, which can be dismissed.
- *
- * @description
- * Full width and flat, with the severity carried by a tinted fill and a
- * hairline beneath rather than by a border on four sides: an announcement is a
- * band across the top of the page, not a box that happens to be wide.
- *
- * @since 0.1.0
- * @status stable
- * @category feedback
- * @aliases Banner, Notification bar, Alert bar
- * @documentation https://helix.fusion.dev/components/announcement
- *
- * @cssproperty --announcement-inset - Inline padding, matched to the page.
- */
 let HelixAnnouncement = class HelixAnnouncement extends HelixHeadlessAnnouncement {
     static { this.styles = styles; }
 };

package/dist/app-header/root/app-header-root.css.js

@@ -1,4 +1,3 @@
-// Generated from src/app-header/root/app-header-root.css by `turbo run styles`. Do not edit.
 import { createSheet } from '@fusion.dev/helix-core';
 export const styles = createSheet(`:host {
 

package/dist/app-header/root/app-header-root.js

@@ -8,54 +8,9 @@ import { customElement } from '@fusion.dev/helix-core';
 import { HelixHeadlessAppHeader } from '@fusion.dev/helix-headless/app-header';
 import { property } from 'lit/decorators.js';
 import { styles } from './app-header-root.css.js';
-/**
- * @summary Page-level banner holding brand, navigation, and actions.
- *
- * @description
- * Flat, opaque, and in the flow. Both of the interesting things a banner can do
- * are opt-in: `sticky` because following the reader is a decision about the
- * page rather than about the bar, and `material` because a backdrop filter
- * makes the header a containing block for `position: fixed` descendants, so an
- * overlay rendered inside a material header is placed against the header rather
- * than the viewport.
- *
- * The separating rule appears only once the page has scrolled, which keeps the
- * banner flat against a hero and lifts it off the content afterwards. There is
- * no shadow: the rule is the whole of it.
- *
- * @since 0.1.0
- * @status stable
- * @category navigation
- * @aliases Masthead, Navbar, TopBar
- * @documentation https://helix.fusion.dev/components/app-header
- *
- * @slot - Primary navigation.
- * @slot actions - Trailing actions, such as a call to action.
- * @slot brand - Wordmark or logo, at the inline start.
- *
- * @csspart content - The centered row inside the banner.
- *
- * @cssproperty --app-header-backdrop - The filter behind it. `none` to pair it with a panel.
- * @cssproperty --app-header-background-color - Fill behind the banner.
- * @cssproperty --app-header-block-size - Height of the banner.
- * @cssproperty --app-header-border-color - The line under the bar. None by default.
- * @cssproperty --app-header-max-inline-size - Width the content is centered in.
- * @cssproperty --app-header-padding - Inline padding of the banner.
- */
 let HelixAppHeader = class HelixAppHeader extends HelixHeadlessAppHeader {
     constructor() {
         super(...arguments);
-        /**
-         * Whether the banner sticks to the top of the viewport.
-         *
-         * Opt in, because following the reader is a decision about the page rather
-         * than about the bar, and because a reflected `true` writes an attribute the
-         * server's markup does not have. Every default here is the absent attribute.
-         *
-         * It pairs with `material`: a bar that does not stick is only ever over the
-         * top of the page, so `glass` and `transparent` have nothing to be
-         * translucent against and the `scrolled` state never lands.
-         */
         this.sticky = false;
     }
     static { this.styles = styles; }

package/dist/aura/root/aura-axis.js

@@ -1,66 +1,8 @@
-/**
- * Where the axis leaves the top edge, and the tilt that puts it there.
- *
- * **Two functions, and the pair is the point.** `exitOf` is a model of what the
- * shader does; `tiltFor` is the solve a consumer's `terminus` goes through. One
- * is the inverse of the other, so a spec can go round the loop and catch either
- * one moving without the other. Nothing else can: `bearing` is private, its
- * output is a uniform, and what that uniform does is a WebGL draw.
- *
- * That guard is the whole reason this file exists. `terminus` was wrong twice
- * while its docstring said otherwise, the arithmetic living inside a getter
- * beside a sentence describing different arithmetic with nothing comparing the
- * two.
- *
- * **`exitOf` mirrors the shader step by step rather than stating the closed
- * form**, which is deliberate and is what makes the round trip worth running.
- * A closed form checked against its own algebra proves only that the algebra
- * was inverted correctly. Written as the same three operations `main()`
- * performs, in the same order, it is a claim about `aura-shader.ts`, and the
- * day someone changes how that file handles the aspect this stops agreeing.
- */
-/** Degrees to radians, which both directions need. */
 const RADIANS = Math.PI / 180;
-/**
- * Where the shader's axis crosses the top edge, as a fraction of the width.
- *
- * Follows `main()` in `aura-shader.ts`:
- *
- * 1. `p.x *= aspect` stretches the frame before anything rotates, so the tilt
- *    the rotation takes is a slope in the stretched frame rather than on
- *    screen.
- * 2. `float a = atan(sin(want), cos(want) * aspect)` is the angle it actually
- *    turns by, which is the asked-for screen angle converted into that frame.
- * 3. `mat2 turn = mat2(cos(a), sin(a), -sin(a), cos(a))` rotates, and the axis
- *    is the line the rotated x is zero on: `cos(a) * x - sin(a) * y = 0`.
- *
- * At the top edge `y` is 1, so the crossing is at `x = tan(a)` in the stretched
- * frame, and dividing the stretch back out puts it on screen. The aspect is
- * therefore paid twice, once going into the rotation and once coming out, which
- * is why it appears squared when the three steps are collapsed.
- *
- * @param tilt - The angle handed to the shader, in degrees.
- * @param aspect - The box's width over its height.
- * @returns The crossing, `0` at the left edge and `1` at the right.
- */
 export const exitOf = (tilt, aspect) => {
     const want = tilt * RADIANS;
     const turned = Math.atan2(Math.sin(want), Math.cos(want) * aspect);
     const stretched = Math.tan(turned);
     return (stretched / aspect + 1) / 2;
 };
-/**
- * The tilt, in degrees, whose axis crosses the top edge at `terminus`.
- *
- * The inverse of `exitOf`, solved rather than fitted: collapsing its three
- * steps gives `terminus = 0.5 + tan(tilt) / (2 * aspect^2)`, and rearranging
- * for the tilt gives what is below.
- *
- * The contract `terminus` claims: `0` is the left edge, `0.5` the middle and
- * `1` the right edge, in every box.
- *
- * @param terminus - The crossing wanted, as a fraction of the width.
- * @param aspect - The box's width over its height.
- * @returns The tilt to hand the shader, in degrees.
- */
 export const tiltFor = (terminus, aspect) => Math.atan(2 * (terminus - 0.5) * aspect * aspect) / RADIANS;

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

@@ -1,4 +1,3 @@
-// Generated from src/aura/root/aura-root.css by `turbo run styles`. Do not edit.
 import { createSheet } from '@fusion.dev/helix-core';
 export const styles = createSheet(`:host {
 position: relative;