@fusion.dev/helix 0.146.0 → 0.148.0

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

@@ -1,362 +1,24 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {
-display: contents;
-}
-
-[part="region"] {
-background-color: var(--map-background-color, var(--helix-color-surface-sunken));
-block-size: var(--map-block-size, 24rem);
-border: var(--helix-border-thin) solid var(--map-border-color, var(--helix-color-border));
-border-radius: var(--helix-radii-sm);
-box-sizing: border-box;
-display: grid;
-grid-template-rows: auto 1fr auto auto;
-overflow: hidden;
-position: relative;
-}
-
-:host([fill]) [part="region"] {
-block-size: auto;
-border: none;
-border-radius: 0;
-container-type: size;
-inset: 0;
-position: absolute;
-}
-
-[part="viewport"] {
-isolation: isolate;
-min-block-size: 0;
-overflow: hidden;
-position: relative;
-}
-
-[part="layers"] {
-block-size: 1px;
-clip-path: inset(50%);
-inline-size: 1px;
-margin: var(--helix-space-none);
-overflow: hidden;
-padding: var(--helix-space-none);
-position: absolute;
-white-space: nowrap;
-}
-
-[part="viewport"] ::slotted(:not(helix-map-marker, helix-map-points, helix-map-position)) {
-block-size: 100%;
-inline-size: 100%;
-}
-
-:host(:state(idle)) ::slotted([slot="header"]),
-:host(:state(idle)) ::slotted([slot="footer"]) {
-opacity: 0;
-transition: opacity var(--helix-duration-fast) var(--helix-easing-standard);
-}
-
-::slotted([slot="attribution"]) {
-
-border-block-start: var(--helix-border-thin) solid var(--helix-color-border);
-color: var(--helix-color-foreground-subtle);
-
-display: block;
-font-size: var(--helix-text-xs);
-padding: var(--helix-space-2xs) var(--helix-space-xs);
-}
-
-:host([credit-placement]) [part="attribution"] {
-inset-block-end: var(--helix-space-2xs);
-max-inline-size: calc(100% - var(--helix-space-2xs) * 2);
-position: absolute;
-}
-
-:host([credit-placement="bottom-end"]) [part="attribution"] {
-inset-inline-end: var(--helix-space-2xs);
-}
-
-:host([credit-placement="bottom-start"]) [part="attribution"] {
-inset-inline-start: var(--helix-space-2xs);
-}
-
-:host([credit-placement]) ::slotted([slot="attribution"]) {
-backdrop-filter: var(--helix-material-backdrop);
-background-color: var(--helix-material-translucent);
-border-block-start: none;
-border-radius: var(--helix-radii-sm);
-color: var(--helix-color-foreground-muted);
-overflow: hidden;
-padding: var(--helix-space-none) var(--helix-space-xs);
-text-overflow: ellipsis;
-white-space: nowrap;
-}
-
-:host([credit-placement])
+export const styles = createSheet(`:host {display: contents;}[part="region"] {background-color: var(--map-background-color, var(--helix-color-surface-sunken));block-size: var(--map-block-size, 24rem);border: var(--helix-border-thin) solid var(--map-border-color, var(--helix-color-border));border-radius: var(--map-radius, var(--helix-radii-sm));box-sizing: border-box;display: grid;grid-template-rows: auto 1fr auto auto;overflow: hidden;position: relative;}:host([fill]) [part="region"] {block-size: auto;border: none;border-radius: 0;container-type: size;inset: 0;position: absolute;}[part="viewport"] {isolation: isolate;min-block-size: 0;overflow: hidden;position: relative;}[part="layers"] {block-size: 1px;clip-path: inset(50%);inline-size: 1px;margin: var(--helix-space-none);overflow: hidden;padding: var(--helix-space-none);position: absolute;white-space: nowrap;}[part="viewport"] ::slotted(:not(helix-map-marker, helix-map-points, helix-map-position)) {block-size: 100%;inline-size: 100%;}:host(:state(idle)) ::slotted([slot="header"]),
+:host(:state(idle)) ::slotted([slot="footer"]) {opacity: 0;transition: opacity var(--helix-duration-fast) var(--helix-easing-standard);}::slotted([slot="attribution"]) {border-block-start: var(--helix-border-thin) solid
+var(--map-attribution-border-color, var(--helix-color-border));color: var(--map-attribution-color, var(--helix-color-foreground-subtle));display: block;font-size: var(--map-attribution-font-size, var(--helix-text-xs));padding: var(--helix-space-2xs) var(--helix-space-xs);}:host([credit-placement]) [part="attribution"] {inset-block-end: var(--helix-space-2xs);max-inline-size: calc(100% - var(--helix-space-2xs) * 2);position: absolute;}:host([credit-placement="bottom-end"]) [part="attribution"] {inset-inline-end: var(--helix-space-2xs);}:host([credit-placement="bottom-start"]) [part="attribution"] {inset-inline-start: var(--helix-space-2xs);}:host([credit-placement]) ::slotted([slot="attribution"]) {backdrop-filter: var(--helix-material-backdrop);background-color: var(--helix-material-translucent);border-block-start: none;border-radius: var(--helix-radii-sm);color: var(--map-attribution-color, var(--helix-color-foreground-muted));overflow: hidden;padding: var(--helix-space-none) var(--helix-space-xs);text-overflow: ellipsis;white-space: nowrap;}:host([credit-placement])
 [part="attribution"]:is(:hover, :focus-within)
-::slotted([slot="attribution"]) {
-white-space: normal;
-}
-
-:host([material="glass"]) [part="controls"] button {
-backdrop-filter: var(--helix-material-backdrop);
-background-color: var(--viewport-control-background-color, var(--helix-material-translucent));
-}
-
-:host([material="frosted"]) [part="controls"] button {
-backdrop-filter: blur(var(--helix-material-blur-lg));
-background-color: var(
+::slotted([slot="attribution"]) {white-space: normal;}:host([material="glass"]) [part="controls"] button {backdrop-filter: var(--helix-material-backdrop);background-color: var(--viewport-control-background-color, var(--helix-material-translucent));}:host([material="frosted"]) [part="controls"] button {backdrop-filter: blur(var(--helix-material-blur-lg));background-color: var(
 --viewport-control-background-color,
 var(--helix-material-translucent-strong)
-);
-}
-
-:host([material="transparent"]) [part="controls"] button {
-backdrop-filter: none;
-background-color: var(--viewport-control-background-color, transparent);
-}
-
-:host([material]) [part="controls"] button:hover {
-background-color: color-mix(
+);}:host([material="transparent"]) [part="controls"] button {backdrop-filter: none;background-color: var(--viewport-control-background-color, transparent);}:host([material]) [part="controls"] button:hover {background-color: color-mix(
 in oklab,
 var(--helix-color-foreground) 10%,
 var(--helix-color-surface-overlay)
-);
-}
-
-@media print {
-[part="controls"] {
-display: none;
-}
-}
-
-[part="controls"] {
-align-items: center;
-display: flex;
-flex-direction: column;
-
-grid-column: 1 / -1;
-grid-row: 2 / 3;
-}
-
-[part="controls"] [part="zoom-in"] {
-border-end-end-radius: 0;
-border-end-start-radius: 0;
-}
-[part="controls"] [part="zoom-out"] {
-border-block-start: 0;
-border-start-end-radius: 0;
-border-start-start-radius: 0;
-margin-block-start: calc(-1 * var(--helix-space-2xs));
-}
-
-[part="tilt"] {
-font-size: var(--helix-text-xs);
-font-weight: var(--helix-weight-semibold);
-}
-
-[part="tilt"][aria-pressed="true"] {
-background-color: var(--helix-color-primary-surface);
-border-color: var(--helix-color-primary-surface);
-color: var(--helix-color-foreground-on-primary);
-}
-
-[part="tilt"][aria-pressed="true"]:hover {
-background-color: var(--helix-color-primary-surface-hover);
-}
-
-[part="compass"] {
-border-radius: var(--helix-radii-sm);
-display: grid;
-grid-template-areas:
+);}@media print {[part="controls"] {display: none;}}[part="controls"] {align-items: center;display: flex;flex-direction: column;grid-column: 1 / -1;grid-row: 2 / 3;}[part="controls"] [part="zoom-in"] {border-end-end-radius: 0;border-end-start-radius: 0;}[part="controls"] [part="zoom-out"] {border-block-start: 0;border-start-end-radius: 0;border-start-start-radius: 0;margin-block-start: calc(-1 * var(--helix-space-2xs));}[part="controls"] [part="face-north"] ::slotted(*) {--icon-size: var(--helix-size-icon-md);block-size: var(--helix-size-icon-md);inline-size: var(--helix-size-icon-md);}[part="tilt"] {font-size: var(--helix-text-xs);font-weight: var(--helix-weight-semibold);}[part="tilt"][aria-pressed="true"] {background-color: var(--map-chosen-color, var(--helix-color-primary-surface));border-color: var(--map-chosen-color, var(--helix-color-primary-surface));color: var(--helix-color-foreground-on-primary);}[part="tilt"][aria-pressed="true"]:hover {background-color: var(--helix-color-primary-surface-hover);}[part="compass"] {border-radius: var(--helix-radii-sm);display: grid;grid-template-areas:
 "rotl   up     rotr"
 "start  north  end"
-".      down   .";
-place-items: center;
-}
-
-[part="rotate-left"] {
-grid-area: rotl;
-}
-[part="rotate-right"] {
-grid-area: rotr;
-}
-[part="face-north"] {
-grid-area: north;
-}
-
-[part="compass"] > :not([part="face-north"]) {
-background-color: transparent;
-block-size: calc(var(--helix-size-control-sm) * 0.75);
-border-color: transparent;
-box-shadow: none;
-font-size: var(--helix-text-xs);
-inline-size: calc(var(--helix-size-control-sm) * 0.75);
-}
-
-[part="compass"]:has(> :not([part="face-north"])) {
-background-color: var(--viewport-control-background-color, var(--helix-color-surface-overlay));
-box-shadow:
+".      down   .";place-items: center;}[part="rotate-left"] {grid-area: rotl;}[part="rotate-right"] {grid-area: rotr;}[part="face-north"] {grid-area: north;}[part="compass"] > :not([part="face-north"]) {background-color: transparent;block-size: calc(var(--helix-size-control-sm) * 0.75);border-color: transparent;box-shadow: none;font-size: var(--helix-text-xs);inline-size: calc(var(--helix-size-control-sm) * 0.75);}[part="compass"]:has(> :not([part="face-north"])) {background-color: var(--viewport-control-background-color, var(--helix-color-surface-overlay));box-shadow:
 var(--helix-shadow-floating),
-0 0 0 var(--helix-border-floating) var(--helix-color-border);
-}
-
-[part="needle"] {
-block-size: var(--helix-size-icon-md);
-inline-size: var(--helix-size-icon-md);
-transform: rotate(var(--map-needle-turn, 0deg));
-}
-[part="needle"] [data-end="north"] {
-fill: var(--helix-color-danger);
-}
-[part="needle"] [data-end="south"] {
-fill: var(--helix-color-foreground-muted);
-}
-
-[part="layers-menu"] {
-background-color: var(--viewport-control-background-color, var(--helix-color-surface-overlay));
-border: var(--helix-border-floating) solid var(--helix-color-border);
-border-radius: var(--helix-radii-sm);
-box-shadow: var(--helix-shadow-floating);
-color: var(--helix-color-foreground);
-display: grid;
-gap: var(--helix-space-sm);
-inline-size: min(calc(var(--helix-size-control-lg) * 6), 70vw);
-inset-block-start: 0;
-inset-inline-end: calc(100% + var(--helix-space-2xs));
-
-max-block-size: calc(var(--map-block-size, 24rem) - var(--helix-space-sm) * 2);
-overflow-y: auto;
-padding: var(--helix-space-sm);
-position: absolute;
-}
-
-:host([fill]) [part="layers-menu"] {
-max-block-size: calc(100cqb - var(--helix-space-sm) * 2);
-}
-
-[part="layers-menu"][hidden] {
-display: none;
-}
-
-:host([controls-placement^="bottom"]) [part="layers-menu"] {
-inset-block: auto 0;
-}
-
-:host([controls-placement$="start"]) [part="layers-menu"] {
-inset-inline: calc(100% + var(--helix-space-2xs)) auto;
-}
-
-[part="map-types"] {
-display: grid;
-gap: var(--helix-space-xs);
-grid-template-columns: repeat(3, 1fr);
-}
-
-[part="map-type"] {
-color: var(--helix-color-foreground-muted);
-cursor: pointer;
-display: grid;
-font-family: var(--helix-font-sans);
-font-size: var(--helix-text-xs);
-gap: var(--helix-space-2xs);
-justify-items: center;
-position: relative;
-}
-
-[part="map-type"] input {
-block-size: 1px;
-inline-size: 1px;
-margin: 0;
-opacity: 0;
-pointer-events: none;
-position: absolute;
-}
-
-[part="map-type-preview"] {
-aspect-ratio: 4 / 3;
-background-color: var(--helix-color-surface-sunken);
-border: var(--helix-border-thick) solid transparent;
-border-radius: var(--helix-radii-sm);
-box-sizing: border-box;
-display: block;
-inline-size: 100%;
-object-fit: cover;
-}
-
-[part="map-type"]:hover,
-[part="map-type"]:has(input:checked) {
-color: var(--helix-color-foreground);
-}
-
-[part="map-type"]:has(input:checked) [part="map-type-preview"] {
-border-color: var(--helix-color-primary-surface);
-}
-
-[part="map-type"]:has(input:focus-visible) [part="map-type-preview"] {
-outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
-outline-offset: var(--helix-size-focus-offset);
-}
-
-[part="layer-choices"] {
-display: grid;
-gap: var(--helix-space-xs);
-grid-template-columns: repeat(3, 1fr);
-}
-
-[part="layers-menu"] [part="layer-choice"] {
-align-content: start;
-background-color: transparent;
-block-size: auto;
-border: 0;
-box-shadow: none;
-color: var(--helix-color-foreground-muted);
-display: grid;
-font-size: var(--helix-text-xs);
-gap: var(--helix-space-2xs);
-inline-size: auto;
-justify-items: center;
-padding: 0;
-text-align: center;
-}
-
-[part="layers-menu"] [part="layer-choice"]:hover,
-[part="layers-menu"] [part="layer-choice"][aria-pressed="true"] {
-background-color: transparent;
-color: var(--helix-color-foreground);
-}
-
-[part="layers-menu"] [part="layer-choice"]:focus-visible {
-outline: none;
-}
-
-[part="layer-icon"] {
-aspect-ratio: 4 / 3;
-background-color: var(--helix-color-surface-sunken);
-border: var(--helix-border-thick) solid transparent;
-border-radius: var(--helix-radii-sm);
-box-sizing: border-box;
-display: block;
-inline-size: 100%;
-padding: var(--helix-space-sm);
-}
-
-[part="layer-choice"][aria-pressed="true"] [part="layer-icon"] {
-border-color: var(--helix-color-primary-surface);
-}
-
-[part="layer-choice"]:focus-visible [part="layer-icon"] {
-outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
-outline-offset: var(--helix-size-focus-offset);
-}
-
-@media (forced-colors: active) {
-[part="tilt"][aria-pressed="true"] {
-background-color: Highlight;
-color: HighlightText;
-forced-color-adjust: none;
-}
-
-[part="map-type"]:has(input:checked),
-[part="layers-menu"] [part="layer-choice"][aria-pressed="true"] {
-outline: var(--helix-border-thick) solid Highlight;
-outline-offset: var(--helix-space-2xs);
-}
-}`);
+0 0 0 var(--helix-border-floating) var(--helix-color-border);}[part="needle"] {block-size: var(--helix-size-icon-md);inline-size: var(--helix-size-icon-md);transform: rotate(var(--map-needle-turn, 0deg));}[part="needle"] [data-end="north"] {fill: var(--map-needle-north-color, var(--helix-color-danger));}[part="needle"] [data-end="south"] {fill: var(--map-needle-south-color, var(--helix-color-foreground-muted));}[part="layers-menu"] {background-color: var(--viewport-control-background-color, var(--helix-color-surface-overlay));border: var(--helix-border-floating) solid var(--helix-color-border);border-radius: var(--helix-radii-sm);box-shadow: var(--helix-shadow-floating);color: var(--helix-color-foreground);display: grid;gap: var(--map-layers-menu-gap, var(--helix-space-sm));inline-size: var(
+--map-layers-menu-inline-size,
+min(calc(var(--helix-size-control-lg) * 6), 70vw)
+);inset-block-start: 0;inset-inline-end: calc(100% + var(--helix-space-2xs));max-block-size: calc(var(--map-block-size, 24rem) - var(--helix-space-sm) * 2);overflow-y: auto;padding: var(--map-layers-menu-padding, var(--helix-space-sm));position: absolute;}:host([fill]) [part="layers-menu"] {max-block-size: calc(100cqb - var(--helix-space-sm) * 2);}[part="layers-menu"][hidden] {display: none;}:host([controls-placement^="bottom"]) [part="layers-menu"] {inset-block: auto 0;}:host([controls-placement$="start"]) [part="layers-menu"] {inset-inline: calc(100% + var(--helix-space-2xs)) auto;}[part="map-types"] {display: grid;gap: var(--helix-space-xs);grid-template-columns: repeat(3, 1fr);}[part="map-type"] {color: var(--helix-color-foreground-muted);cursor: pointer;display: grid;font-family: var(--helix-font-sans);font-size: var(--helix-text-xs);gap: var(--helix-space-2xs);justify-items: center;position: relative;}[part="map-type"] input {block-size: 1px;inline-size: 1px;margin: 0;opacity: 0;pointer-events: none;position: absolute;}[part="map-type-preview"] {aspect-ratio: 4 / 3;background-color: var(--helix-color-surface-sunken);border: var(--helix-border-thick) solid transparent;border-radius: var(--helix-radii-sm);box-sizing: border-box;display: block;inline-size: 100%;object-fit: cover;}[part="map-type"]:hover,
+[part="map-type"]:has(input:checked) {color: var(--helix-color-foreground);}[part="map-type"]:has(input:checked) [part="map-type-preview"] {border-color: var(--map-chosen-color, var(--helix-color-primary-surface));}[part="map-type"]:has(input:focus-visible) [part="map-type-preview"] {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset);}[part="layer-choices"] {display: grid;gap: var(--helix-space-xs);grid-template-columns: repeat(3, 1fr);}[part="layers-menu"] [part="layer-choice"] {align-content: start;background-color: transparent;block-size: auto;border: 0;box-shadow: none;color: var(--helix-color-foreground-muted);display: grid;font-size: var(--helix-text-xs);gap: var(--helix-space-2xs);inline-size: auto;justify-items: center;padding: 0;text-align: center;}[part="layers-menu"] [part="layer-choice"]:hover,
+[part="layers-menu"] [part="layer-choice"][aria-pressed="true"] {background-color: transparent;color: var(--helix-color-foreground);}[part="layers-menu"] [part="layer-choice"]:focus-visible {outline: none;}[part="layer-icon"] {aspect-ratio: 4 / 3;background-color: var(--helix-color-surface-sunken);border: var(--helix-border-thick) solid transparent;border-radius: var(--helix-radii-sm);box-sizing: border-box;display: block;inline-size: 100%;padding: var(--helix-space-sm);}[part="layer-choice"][aria-pressed="true"] [part="layer-icon"] {border-color: var(--map-chosen-color, var(--helix-color-primary-surface));}[part="layer-choice"]:focus-visible [part="layer-icon"] {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset);}@media (forced-colors: active) {[part="tilt"][aria-pressed="true"] {background-color: Highlight;color: HighlightText;forced-color-adjust: none;}[part="map-type"]:has(input:checked),
+[part="layers-menu"] [part="layer-choice"][aria-pressed="true"] {outline: var(--helix-border-thick) solid Highlight;outline-offset: var(--helix-space-2xs);}}`);

package/dist/map/root/map-root.d.ts

@@ -19,9 +19,19 @@ import type { CSSResultGroup } from 'lit';
  * @aliases Map frame, Map container, Geo
  * @documentation https://fusion.dev/helix/components/map
  *
+ * @cssproperty --map-attribution-border-color - The rule above the map credit, under the map.
+ * @cssproperty --map-attribution-color - The color of the map credit.
+ * @cssproperty --map-attribution-font-size - The size of the map credit's text.
  * @cssproperty --map-background-color - The color behind the map while tiles load.
  * @cssproperty --map-block-size - The frame's height, as a length. Ignored with `fill`, where the container decides it.
  * @cssproperty --map-border-color - The frame's border color.
+ * @cssproperty --map-chosen-color - The fill of the pressed 3D button and the ring around the chosen map type and each shown layer in the layers menu.
+ * @cssproperty --map-layers-menu-gap - The space between the map types and the layers in the layers menu.
+ * @cssproperty --map-layers-menu-inline-size - The width of the layers menu.
+ * @cssproperty --map-layers-menu-padding - The space inside the edge of the layers menu.
+ * @cssproperty --map-needle-north-color - The north half of the compass needle.
+ * @cssproperty --map-needle-south-color - The south half of the compass needle.
+ * @cssproperty --map-radius - The frame's corners.
  * @cssproperty --viewport-control-background-color - The background of the pan and zoom buttons. Canvas uses the same property.
  */
 export declare class HelixMap extends HelixHeadlessMap {

package/dist/map/route/map-route.css.js

@@ -1,25 +1,2 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {
-border-color: var(--map-route-casing-color, var(--helix-color-surface));
-color: var(--map-route-color, var(--helix-color-primary));
-display: none;
-}
-
-:host([tone="accent"]) {
-color: var(--helix-color-accent);
-}
-:host([tone="danger"]) {
-color: var(--helix-color-danger);
-}
-:host([tone="info"]) {
-color: var(--helix-color-info);
-}
-:host([tone="neutral"]) {
-color: var(--helix-color-foreground-muted);
-}
-:host([tone="success"]) {
-color: var(--helix-color-success);
-}
-:host([tone="warning"]) {
-color: var(--helix-color-warning);
-}`);
+export const styles = createSheet(`:host {border-color: var(--map-route-casing-color, var(--helix-color-surface));color: var(--map-route-color, var(--helix-color-primary));display: none;}:host([tone="accent"]) {color: var(--helix-color-accent);}:host([tone="danger"]) {color: var(--helix-color-danger);}:host([tone="info"]) {color: var(--helix-color-info);}:host([tone="neutral"]) {color: var(--helix-color-foreground-muted);}:host([tone="success"]) {color: var(--helix-color-success);}:host([tone="warning"]) {color: var(--helix-color-warning);}`);

package/dist/map/terrain/map-terrain.css.js

@@ -1,12 +1,8 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {
-border-top-color: var(
+export const styles = createSheet(`:host {border-top-color: var(
 --map-terrain-highlight-color,
 color-mix(in oklab, var(--helix-color-foreground-media) 25%, transparent)
-);
-color: var(
+);color: var(
 --map-terrain-shadow-color,
 color-mix(in oklab, var(--helix-color-surface-media) 40%, transparent)
-);
-display: none;
-}`);
+);display: none;}`);

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

@@ -1,173 +1,22 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {
-display: inline-flex;
-}
-
-[part="trigger"] {
-all: unset;
-box-sizing: border-box;
-
-align-items: center;
-border-radius: var(--megamenu-trigger-radius, var(--helix-radii-sm));
-color: var(--megamenu-trigger-color, var(--helix-color-foreground-muted));
-cursor: pointer;
-display: inline-flex;
-font-family: var(--helix-font-sans);
-font-size: var(--megamenu-trigger-font-size, var(--helix-text-sm));
-font-weight: var(--megamenu-trigger-font-weight, var(--helix-weight-medium));
-gap: var(--helix-space-2xs);
-min-block-size: var(--helix-size-control-tight);
-padding-inline: var(--megamenu-trigger-padding-inline, var(--helix-space-xs));
-transition:
+export const styles = createSheet(`:host {display: inline-flex;position: relative;}[part="indicator"] {align-items: flex-end;display: flex;inset-block: 0;inset-inline: 0;justify-content: center;pointer-events: none;position: absolute;}[part="trigger"] {all: unset;box-sizing: border-box;align-items: center;border-radius: var(--megamenu-trigger-radius, var(--helix-radii-sm));color: var(--megamenu-trigger-color, var(--helix-color-foreground-muted));cursor: pointer;display: inline-flex;font-family: var(--helix-font-sans);font-size: var(--megamenu-trigger-font-size, var(--helix-text-sm));font-weight: var(--megamenu-trigger-font-weight, var(--helix-weight-medium));gap: var(--helix-space-2xs);min-block-size: var(--helix-size-control-tight);padding-inline: var(--megamenu-trigger-padding-inline, var(--helix-space-xs));transition:
 background-color var(--helix-duration-fast) var(--helix-easing-standard),
-color var(--helix-duration-fast) var(--helix-easing-standard);
-}
-
-[part="trigger"]:hover {
-color: var(--megamenu-trigger-hover-color, var(--helix-color-foreground));
-}
-
-[part="trigger"]:focus-visible {
-outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
-outline-offset: var(--helix-size-focus-offset);
-}
-
-[part="trigger"][aria-expanded="true"] {
-background-color: var(
+color var(--helix-duration-fast) var(--helix-easing-standard);}[part="trigger"]:hover {color: var(--megamenu-trigger-hover-color, var(--helix-color-foreground));}[part="trigger"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset);}[part="trigger"][aria-expanded="true"] {background-color: var(
 --megamenu-trigger-open-background-color,
 color-mix(in oklab, var(--helix-color-foreground) 8%, transparent)
-);
-color: var(--megamenu-trigger-open-color, var(--helix-color-foreground));
-}
-
-[part="surface"] {
-
-backdrop-filter: var(--megamenu-backdrop, none);
-background-color: var(--megamenu-background-color, var(--helix-color-background));
-
-border: var(--megamenu-border-width, var(--helix-border-thin)) solid
-light-dark(transparent, var(--helix-color-border));
-
-border-radius: var(--helix-radii-sm);
-box-shadow: var(--megamenu-shadow, var(--helix-shadow-floating));
-box-sizing: border-box;
-
-clip-path: inset(0 calc(var(--helix-space-xl) * -1) 100% calc(var(--helix-space-xl) * -1));
-
-display: grid;
-gap: var(--megamenu-gap, var(--helix-space-xl));
-grid-auto-columns: minmax(var(--megamenu-column-size, 15rem), 1fr);
-grid-auto-flow: column;
-
-inline-size: max-content;
-margin: var(--helix-space-none);
-
-max-inline-size: min(var(--megamenu-size, 52rem), calc(100% - var(--helix-space-xl) * 2));
-padding: var(--megamenu-padding, var(--helix-space-md));
-
-transition:
+);color: var(--megamenu-trigger-open-color, var(--helix-color-foreground));}[part="surface"] {backdrop-filter: var(--megamenu-backdrop, none);background-color: var(--megamenu-background-color, var(--helix-color-background));border: var(--megamenu-border-width, var(--helix-border-thin)) solid
+light-dark(transparent, var(--helix-color-border));border-radius: var(--helix-radii-sm);box-shadow: var(--megamenu-shadow, var(--helix-shadow-floating));box-sizing: border-box;clip-path: inset(0 calc(var(--helix-space-xl) * -1) 100% calc(var(--helix-space-xl) * -1));display: grid;gap: var(--megamenu-gap, var(--helix-space-xl));grid-auto-columns: minmax(var(--megamenu-column-size, 15rem), 1fr);grid-auto-flow: column;inline-size: max-content;margin: var(--helix-space-none);max-inline-size: min(var(--megamenu-size, 52rem), calc(100% - var(--helix-space-xl) * 2));padding: var(--megamenu-padding, var(--helix-space-md));transition:
 clip-path var(--megamenu-duration, var(--helix-duration-slow)) var(--helix-easing-decelerate),
 display var(--megamenu-duration, var(--helix-duration-slow)) allow-discrete,
-overlay var(--megamenu-duration, var(--helix-duration-slow)) allow-discrete;
-}
-
-[part="surface"]:popover-open {
-clip-path: inset(
+overlay var(--megamenu-duration, var(--helix-duration-slow)) allow-discrete;}[part="surface"]:popover-open {clip-path: inset(
 0 calc(var(--helix-space-xl) * -1) calc(var(--helix-space-xl) * -1)
 calc(var(--helix-space-xl) * -1)
-);
-}
-
-@starting-style {
-[part="surface"]:popover-open {
-clip-path: inset(0 calc(var(--helix-space-xl) * -1) 100% calc(var(--helix-space-xl) * -1));
-}
-}
-
-:host(:not([variant="band"])) [part="surface"] {
-clip-path: inset(0 100% 100% calc(var(--helix-space-xl) * -1));
-}
-
-:host(:not([variant="band"])) [part="surface"]:popover-open {
-clip-path: inset(
+);}@starting-style {[part="surface"]:popover-open {clip-path: inset(0 calc(var(--helix-space-xl) * -1) 100% calc(var(--helix-space-xl) * -1));}}:host(:not([variant="band"])) [part="surface"] {clip-path: inset(0 100% 100% calc(var(--helix-space-xl) * -1));}:host(:not([variant="band"])) [part="surface"]:popover-open {clip-path: inset(
 0 calc(var(--helix-space-xl) * -1) calc(var(--helix-space-xl) * -1)
 calc(var(--helix-space-xl) * -1)
-);
-}
-
-@starting-style {
-:host(:not([variant="band"])) [part="surface"]:popover-open {
-clip-path: inset(0 100% 100% calc(var(--helix-space-xl) * -1));
-}
-}
-
-:host([variant="band"]) [part="surface"],
-:host(:state(narrow)) [part="surface"] {
-
-backdrop-filter: var(--megamenu-backdrop, none);
-background-color: var(--megamenu-background-color, var(--helix-color-background));
-
-border: none;
-border-radius: var(--helix-radii-none);
-box-shadow: var(--helix-shadow-md);
-
-clip-path: inset(0 0 100% 0);
-
-display: grid;
-grid-auto-flow: row;
-grid-template-columns: repeat(auto-fit, minmax(var(--megamenu-column-size, 15rem), 1fr));
-inline-size: auto;
-inset-block-start: var(--megamenu-top, 100%);
-inset-inline: 0;
-max-inline-size: none;
-
-padding-block: var(--helix-space-md) var(--helix-space-xl);
-
-padding-inline: max(var(--helix-space-xl), calc((100% - var(--megamenu-full-size, 80rem)) / 2));
-position: fixed;
-}
-
-:host([variant="band"]) [part="surface"]:popover-open,
-:host(:state(narrow)) [part="surface"]:popover-open {
-clip-path: inset(0 0 calc(var(--helix-space-xl) * -1) 0);
-}
-
-@starting-style {
-:host([variant="band"]) [part="surface"]:popover-open,
-:host(:state(narrow)) [part="surface"]:popover-open {
-clip-path: inset(0 0 100% 0);
-}
-}
-
-:host(:state(narrow)) [part="surface"] {
-grid-auto-flow: row;
-grid-template-columns: 1fr;
-
-max-block-size: calc(100dvh - var(--megamenu-top, 0px) - var(--helix-space-xl));
-overflow-y: auto;
-overscroll-behavior: contain;
-padding-inline: var(--helix-space-md);
-}
-
-:host [part="surface"][hidden] {
-display: none;
-}
-
-@media (prefers-reduced-motion: reduce) {
-[part="trigger"] {
-transition: none;
-}
-
-[part="surface"] {
-clip-path: none;
-transition:
+);}@starting-style {:host(:not([variant="band"])) [part="surface"]:popover-open {clip-path: inset(0 100% 100% calc(var(--helix-space-xl) * -1));}}:host([variant="band"]) [part="surface"],
+:host(:state(narrow)) [part="surface"] {backdrop-filter: var(--megamenu-backdrop, none);background-color: var(--megamenu-background-color, var(--helix-color-background));border: none;border-radius: var(--helix-radii-none);box-shadow: var(--helix-shadow-md);clip-path: inset(0 0 100% 0);display: grid;grid-auto-flow: row;grid-template-columns: repeat(auto-fit, minmax(var(--megamenu-column-size, 15rem), 1fr));inline-size: auto;inset-block-start: var(--megamenu-top, 100%);inset-inline: 0;max-inline-size: none;padding-block: var(--helix-space-md) var(--helix-space-xl);padding-inline: max(var(--helix-space-xl), calc((100% - var(--megamenu-full-size, 80rem)) / 2));position: fixed;}:host([variant="band"]) [part="surface"]:popover-open,
+:host(:state(narrow)) [part="surface"]:popover-open {clip-path: inset(0 0 calc(var(--helix-space-xl) * -1) 0);}@starting-style {:host([variant="band"]) [part="surface"]:popover-open,
+:host(:state(narrow)) [part="surface"]:popover-open {clip-path: inset(0 0 100% 0);}}:host(:state(narrow)) [part="surface"] {grid-auto-flow: row;grid-template-columns: 1fr;max-block-size: calc(100dvh - var(--megamenu-top, 0px) - var(--helix-space-xl));overflow-y: auto;overscroll-behavior: contain;padding-inline: var(--helix-space-md);}:host [part="surface"][hidden] {display: none;}@media (prefers-reduced-motion: reduce) {[part="trigger"] {transition: none;}[part="surface"] {clip-path: none;transition:
 display var(--helix-duration-instant) allow-discrete,
-overlay var(--helix-duration-instant) allow-discrete;
-}
-}
-
-@media print {
-:host {
-display: none;
-}
-}`);
+overlay var(--helix-duration-instant) allow-discrete;}}@media print {:host {display: none;}}`);

package/dist/megamenu/root/megamenu-root.d.ts

@@ -7,6 +7,14 @@ import type { CSSResultGroup } from 'lit';
  * Styles the trigger and lays out the panel it opens as a grid of columns. What
  * opens and closes the panel comes from the base class.
  *
+ * **The panel's contents are laid out by `helix.css`**, through attributes you
+ * write on your own markup: `data-megamenu-group` on each column,
+ * `data-megamenu-heading` on a column's heading, and `data-megamenu-item` on a
+ * link that carries a title in `<strong>` and a line of description in `<span>`
+ * or `<p>`, with an icon before them. A plain `<a>` in a group is drawn as a
+ * navigation item. Without the attributes the panel holds your markup as you
+ * styled it.
+ *
  * @since 0.1.0
  * @status stable
  * @category navigation