@fusion.dev/helix 0.146.0 → 0.147.0

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

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

@@ -1,138 +1,15 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {
-display: block;
-}
-
-[part="item"] {
-align-items: center;
-
-text-decoration: none;
-
-border-radius: var(--helix-radii-none);
-color: var(--helix-color-foreground);
-cursor: pointer;
-display: grid;
-
-font-size: var(--helix-text-xs);
-
-font-weight: var(--helix-weight-medium);
-
-grid-template-columns:
+export const styles = createSheet(`:host {display: block;}[part="item"] {align-items: center;text-decoration: none;border-radius: var(--helix-radii-none);color: var(--helix-color-foreground);cursor: pointer;display: grid;font-size: var(--helix-text-xs);font-weight: var(--helix-weight-medium);grid-template-columns:
 var(--menu-item-start, 0px)
 minmax(0, 1fr)
 auto
-var(--menu-item-end, 0px);
-
-min-block-size: var(--helix-size-control);
-
-padding-inline: var(--helix-space-sm);
-transition: background-color var(--helix-duration-fast) var(--helix-easing-standard);
-user-select: none;
-}
-
-[part="item"]:hover {
-background-color: var(
+var(--menu-item-end, 0px);min-block-size: var(--helix-size-control);padding-inline: var(--helix-space-sm);transition: background-color var(--helix-duration-fast) var(--helix-easing-standard);user-select: none;}[part="item"]:hover {background-color: var(
 --menu-item-hover-color,
 color-mix(in oklab, var(--helix-color-foreground) 8%, transparent)
-);
-}
-
-[part="item"]:focus-visible {
-outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
-outline-offset: calc(var(--helix-size-focus-offset) * -1);
-}
-
-[part="item"][aria-disabled="true"] {
-cursor: not-allowed;
-opacity: 0.5;
-}
-
-[part="start"] {
-
---icon-size: var(--helix-size-icon);
-
-align-items: center;
-
-box-sizing: border-box;
-color: var(--helix-color-foreground-subtle);
-display: flex;
-justify-content: center;
-padding-inline-end: var(--helix-space-xs);
-
-min-block-size: var(--helix-size-icon);
-}
-
-[part="start"] {
-grid-column: 1;
-}
-
-[part="item"] > slot:not([name]) {
-display: block;
-grid-column: 2;
-
-min-inline-size: 0;
-}
-
-slot[name="description"] {
-color: var(--menu-item-description-color, var(--helix-color-foreground-subtle));
-display: block;
-font-weight: var(--helix-weight-regular);
-grid-column: 2;
-grid-row: 2;
-min-inline-size: 0;
-padding-block-end: var(--helix-space-2xs);
-}
-
-slot[name="description"][data-empty] {
-display: none;
-}
-
-[part="end"] {
-align-items: center;
-color: var(--menu-item-detail-color, var(--helix-color-foreground-subtle));
-display: flex;
-gap: var(--helix-space-2xs);
-grid-column: 3;
-padding-inline-start: var(--helix-space-sm);
-}
-
-[part="end"][data-empty] {
-display: none;
-}
-
-[part="mark"],
+);}[part="item"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: calc(var(--helix-size-focus-offset) * -1);}[part="item"][aria-disabled="true"] {cursor: not-allowed;opacity: 0.5;}[part="start"] {--icon-size: var(--helix-size-icon);align-items: center;box-sizing: border-box;color: var(--helix-color-foreground-subtle);display: flex;justify-content: center;padding-inline-end: var(--helix-space-xs);min-block-size: var(--helix-size-icon);}[part="start"] {grid-column: 1;}[part="item"] > slot:not([name]) {display: block;grid-column: 2;min-inline-size: 0;}slot[name="description"] {color: var(--menu-item-description-color, var(--helix-color-foreground-subtle));display: block;font-weight: var(--helix-weight-regular);grid-column: 2;grid-row: 2;min-inline-size: 0;padding-block-end: var(--helix-space-2xs);}slot[name="description"][data-empty] {display: none;}[part="end"] {align-items: center;color: var(--menu-item-detail-color, var(--helix-color-foreground-subtle));display: flex;gap: var(--helix-space-2xs);grid-column: 3;padding-inline-start: var(--helix-space-sm);}[part="end"][data-empty] {display: none;}[part="mark"],
 slot[name="check"]::slotted(*),
-slot[name="chevron"]::slotted(*) {
-grid-column: 4;
-grid-row: 1;
-}
-
-[part="start"][data-empty] {
-display: none;
-}
-
-[part="mark"],
+slot[name="chevron"]::slotted(*) {grid-column: 4;grid-row: 1;}[part="start"][data-empty] {display: none;}[part="mark"],
 slot[name="check"]::slotted(*),
-slot[name="chevron"]::slotted(*) {
-block-size: var(--helix-size-icon);
-inline-size: var(--helix-size-icon);
-justify-self: end;
-}
-
-svg[part="mark"],
-slot[name="chevron"]::slotted(*) {
-color: var(--helix-color-foreground-subtle);
-}
-
-:host(:state(checked)) svg[part="mark"],
-slot[name="check"]::slotted(*) {
-color: var(--helix-color-foreground);
-}
-
-slot[name="submenu"] {
-display: contents;
-}
-
-slot[name="submenu"]::slotted(helix-divider) {
-margin-block: var(--helix-space-2xs);
-}`);
+slot[name="chevron"]::slotted(*) {block-size: var(--helix-size-icon);inline-size: var(--helix-size-icon);justify-self: end;}svg[part="mark"],
+slot[name="chevron"]::slotted(*) {color: var(--helix-color-foreground-subtle);}:host(:state(checked)) svg[part="mark"],
+slot[name="check"]::slotted(*) {color: var(--helix-color-foreground);}slot[name="submenu"] {display: contents;}slot[name="submenu"]::slotted(helix-divider) {margin-block: var(--helix-space-2xs);}`);

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

@@ -1,111 +1,2 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {
-
-display: contents;
-}
-
-[part="surface"] {
-
---helix-size-control: var(--helix-size-control-sm);
---helix-size-control-loose: calc(var(--helix-size-control) * 1.2);
---helix-size-control-tight: calc(var(--helix-size-control) * 0.8);
---helix-size-icon: var(--helix-size-icon-sm);
---helix-size-icon-loose: calc(var(--helix-size-icon) * 1.2);
---helix-size-icon-tight: calc(var(--helix-size-icon) * 0.8);
-
---menu-item-start: 0px;
---menu-item-end: 0px;
-
-max-block-size: var(--menu-max-block-size, var(--floating-available-block-size, none));
-overflow-y: auto;
-
---_floating-background-color: var(--menu-background-color, var(--helix-color-surface-overlay));
---_floating-border-color: var(--menu-border-color, var(--helix-color-border));
---_floating-border-width: var(--menu-border-width, var(--helix-border-floating));
---_floating-shadow: var(--menu-shadow, var(--helix-shadow-floating));
-
-min-inline-size: var(--menu-min-inline-size, 12rem);
-
-padding-block: var(--helix-space-xs);
-padding-inline: var(--helix-space-none);
-}
-
-:host(:state(start)) [part="surface"] {
---menu-item-start: calc(var(--helix-size-icon) + var(--helix-space-xs));
-}
-
-:host(:state(mark)) [part="surface"] {
---menu-item-end: calc(var(--helix-size-icon) + var(--helix-space-xs));
-}
-
-[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="header"] {
-align-items: center;
-border-block-end: var(--helix-border-thin) solid var(--helix-color-border);
-display: flex;
-gap: var(--helix-space-2xs);
-margin-block-end: var(--helix-space-2xs);
-
-padding: var(--helix-space-2xs) var(--helix-space-xs) var(--helix-space-xs);
-}
-
-[part="back"] {
-align-items: center;
-background: none;
-border: none;
-border-radius: var(--helix-radii-sm);
-color: var(--helix-color-foreground-muted);
-cursor: pointer;
-display: inline-flex;
-justify-content: center;
-
-block-size: calc(var(--helix-size-icon) + var(--helix-space-xs));
-inline-size: calc(var(--helix-size-icon) + var(--helix-space-xs));
-padding: var(--helix-space-none);
-}
-
-[part="back"] svg {
-block-size: var(--helix-size-icon);
-inline-size: var(--helix-size-icon);
-}
-
-[part="back"]:hover {
-background-color: color-mix(in oklab, var(--helix-color-foreground) 8%, transparent);
-color: var(--helix-color-foreground);
-}
-
-[part="back"]:focus-visible {
-outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
-outline-offset: calc(var(--helix-size-focus-offset) * -1);
-}
-
-[part="title"] {
-color: var(--helix-color-foreground);
-font-size: var(--helix-text-xs);
-font-weight: var(--helix-weight-medium);
-}
-
-::slotted(helix-divider) {
-margin-block: var(--helix-space-2xs);
-}
-
-[part="surface"][data-drilled] slot::slotted(:not(helix-menu-item)) {
-display: none;
-}
-
-:host([loading]) [part="surface"] {
-opacity: 0.5;
-}
-
-@media print {
-:host {
-display: none;
-}
-}`);
+export const styles = createSheet(`:host {display: contents;}[part="surface"] {--helix-size-control: var(--helix-size-control-sm);--helix-size-control-loose: calc(var(--helix-size-control) * 1.2);--helix-size-control-tight: calc(var(--helix-size-control) * 0.8);--helix-size-icon: var(--helix-size-icon-sm);--helix-size-icon-loose: calc(var(--helix-size-icon) * 1.2);--helix-size-icon-tight: calc(var(--helix-size-icon) * 0.8);--menu-item-start: 0px;--menu-item-end: 0px;max-block-size: var(--menu-max-block-size, var(--floating-available-block-size, none));overflow-y: auto;--_floating-background-color: var(--menu-background-color, var(--helix-color-surface-overlay));--_floating-border-color: var(--menu-border-color, var(--helix-color-border));--_floating-border-width: var(--menu-border-width, var(--helix-border-floating));--_floating-shadow: var(--menu-shadow, var(--helix-shadow-floating));min-inline-size: var(--menu-min-inline-size, 12rem);padding-block: var(--helix-space-xs);padding-inline: var(--helix-space-none);}:host(:state(start)) [part="surface"] {--menu-item-start: calc(var(--helix-size-icon) + var(--helix-space-xs));}:host(:state(mark)) [part="surface"] {--menu-item-end: calc(var(--helix-size-icon) + var(--helix-space-xs));}[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="header"] {align-items: center;border-block-end: var(--helix-border-thin) solid var(--helix-color-border);display: flex;gap: var(--helix-space-2xs);margin-block-end: var(--helix-space-2xs);padding: var(--helix-space-2xs) var(--helix-space-xs) var(--helix-space-xs);}[part="back"] {align-items: center;background: none;border: none;border-radius: var(--helix-radii-sm);color: var(--helix-color-foreground-muted);cursor: pointer;display: inline-flex;justify-content: center;block-size: calc(var(--helix-size-icon) + var(--helix-space-xs));inline-size: calc(var(--helix-size-icon) + var(--helix-space-xs));padding: var(--helix-space-none);}[part="back"] svg {block-size: var(--helix-size-icon);inline-size: var(--helix-size-icon);}[part="back"]:hover {background-color: color-mix(in oklab, var(--helix-color-foreground) 8%, transparent);color: var(--helix-color-foreground);}[part="back"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: calc(var(--helix-size-focus-offset) * -1);}[part="title"] {color: var(--helix-color-foreground);font-size: var(--helix-text-xs);font-weight: var(--helix-weight-medium);}::slotted(helix-divider) {margin-block: var(--helix-space-2xs);}[part="surface"][data-drilled] slot::slotted(:not(helix-menu-item)) {display: none;}:host([loading]) [part="surface"] {opacity: 0.5;}@media print {:host {display: none;}}`);

package/dist/menu/section/menu-section.css.js

@@ -1,14 +1,2 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {
-display: block;
-}
-
-[part="heading"] {
-color: var(--menu-section-heading-color, var(--helix-color-foreground-subtle));
-font-size: var(--helix-text-xs);
-font-weight: var(--helix-weight-medium);
-line-height: var(--helix-leading-normal);
-padding-block: var(--helix-space-xs) var(--helix-space-2xs);
-padding-inline: var(--helix-space-sm);
-user-select: none;
-}`);
+export const styles = createSheet(`:host {display: block;}[part="heading"] {color: var(--menu-section-heading-color, var(--helix-color-foreground-subtle));font-size: var(--helix-text-xs);font-weight: var(--helix-weight-medium);line-height: var(--helix-leading-normal);padding-block: var(--helix-space-xs) var(--helix-space-2xs);padding-inline: var(--helix-space-sm);user-select: none;}`);