@eunomia/elements 1.0.0-beta.9 → 1.0.0

package/dist/components/navigation/carousel/carousel.d.ts

@@ -54,15 +54,15 @@ declare const EunomiaCarousel_base: import("../../../utils/constructor.type.js")
  * @prop {EunomiaCarouselNavPlacement} [navPlacement='end'] - Where the previous and next buttons sit within the header row. Has no effect while they're overlaid on the viewport instead
  * @attr {EunomiaCarouselNavPlacement} [nav-placement='end'] - Where the previous and next buttons sit within the header row. Has no effect while they're overlaid on the viewport instead
  * @prop {number} [visibleSlides=1] - How many slides are shown at once
- * @prop {boolean} [fullSlides=true] - Whether the visible slides fill the viewport exactly, or leave part of the next one peeking at the edge
+ * @prop {boolean} [fullSlides=false] - Whether the visible slides fill the viewport exactly, or leave part of the next one peeking at the edge
  * @prop {number} [scrollStep=1] - How many slides a previous, next, or dot click advances by, independently of visibleSlides
  * @prop {boolean} [centerSnap=false] - Free continuous scrolling that snaps to whichever slide ends up nearest the center, instead of discrete paging
- * @prop {boolean} [edgeFade=true] - Fades the viewport's edges to hint there's more to scroll, hidden automatically on whichever side is already at its bound. On by default
+ * @prop {boolean} [edgeFade=false] - Fades the viewport's edges to hint there's more to scroll, hidden automatically on whichever side is already at its bound
  * @prop {boolean} [loop=false] - Wraps the previous, next, and autoplay controls around at the bounds instead of stopping there, and keeps the previous and next buttons enabled at the bounds instead of disabling them
  * @prop {boolean} [autoplay=false] - Automatically advances by scrollStep on a set interval. Pauses on hover or focus, but renders no pause or play control of its own, so pair this with a visible control of your own calling the public pause and resume methods, since a moving carousel nobody can stop fails accessibility guidelines
  * @prop {number} [autoplayInterval=4000] - Milliseconds between each autoplay advance
- * @prop {boolean} [showArrows=true] - Shows the previous and next buttons
- * @prop {boolean} [showDots=true] - Shows the pagination dots
+ * @prop {boolean} [showArrows=false] - Shows the previous and next buttons
+ * @prop {boolean} [showDots=false] - Shows the pagination dots
  * @attr {string} aria-label - The accessible name for the carousel region. Recommended whenever a page has more than one carousel, or its purpose isn't already clear from a preceding heading. Defaults to the localized string for the current locale (English: "Carousel")
  * @prop {string} [previousLabel] - The accessible label of the previous control. Defaults to the localized string for the current locale (English: "Previous slide")
  * @attr {string} [previous-label] - The accessible label of the previous control. Defaults to the localized string for the current locale (English: "Previous slide")
@@ -107,6 +107,7 @@ declare const EunomiaCarousel_base: import("../../../utils/constructor.type.js")
  * @cssprop [--carousel-dot-border-radius] - Sets the corner radius of the pagination dots
  * @cssprop [--carousel-dot-color] - Sets the color of the pagination dots
  * @cssprop [--carousel-dot-active-color] - Sets the color of the active pagination dot
+ * @cssprop [--carousel-focus-outline-color] - Sets the keyboard focus outline color of the track, the previous and next controls and the dots
  * @element eun-carousel
  */
 export declare class EunomiaCarousel extends EunomiaCarousel_base {
@@ -151,7 +152,7 @@ export declare class EunomiaCarousel extends EunomiaCarousel_base {
     /**
      * Whether the visible slides fill the viewport exactly, or leave
      * `--carousel-peek-size` of the next one peeking at the edge.
-     * @default true
+     * @default false
      */
     fullSlides: boolean;
     /**
@@ -170,8 +171,7 @@ export declare class EunomiaCarousel extends EunomiaCarousel_base {
      * Fades the viewport's edges to hint there's more to scroll — hidden
      * automatically on whichever side is already at its scroll bound (never
      * shown on the left at the very start, or the right at the very end).
-     * On by default ; `edge-fade="false"` turns it off.
-     * @default true
+     * @default false
      */
     edgeFade: boolean;
     /**
@@ -196,12 +196,12 @@ export declare class EunomiaCarousel extends EunomiaCarousel_base {
     autoplayInterval: number;
     /**
      * Shows the previous/next buttons.
-     * @default true
+     * @default false
      */
     showArrows: boolean;
     /**
      * Shows the pagination dots.
-     * @default true
+     * @default false
      */
     showDots: boolean;
     /**
@@ -349,16 +349,25 @@ export declare class EunomiaCarousel extends EunomiaCarousel_base {
      */
     goTo(index: number): void;
     /**
-     * Reads a numeric custom property (a length such as
-     * `--carousel-nav-icon-size`, or a plain count such as
-     * `--carousel-visible-slides`) off the host as a plain number, pixels
-     * for a length, falling back when unset or invalid.
+     * Reads a plain count custom property, such as
+     * `--carousel-visible-slides`, off the host as a number, falling back
+     * when unset or invalid.
+     *
+     * @param name the custom property's name.
+     * @param fallback the value to use when unset or invalid.
+     * @private
+     */
+    private getCssNumber;
+    /**
+     * Reads a length custom property, such as `--carousel-nav-icon-size`,
+     * off the host in pixels, so tokens like `2rem` are converted rather
+     * than read as `2`. Falls back when unset or invalid.
      *
      * @param name the custom property's name.
      * @param fallback the value to use when unset or invalid.
      * @private
      */
-    private getCssPixelValue;
+    private getCssLength;
     /**
      * The track's inline padding in pixels, set by
      * `--carousel-track-padding-inline` to let the track bleed past the

package/dist/components/navigation/carousel/carousel.js

@@ -7,11 +7,11 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { customElement, property, query, queryAssignedElements, state, } from "lit/decorators.js";
 import { html, LitElement, nothing } from "lit";
 import { classMap } from "lit/directives/class-map.js";
+import { readCssLength } from "../../../utils/css-length.utils.js";
 import { debounce } from "../../../utils/time.utils.js";
 import { SlideChangeEvent } from "../../../events/slidechange.event.js";
 import { carouselStyles } from "./carousel.styles.js";
 import { LocalizableMixin } from "../../../mixins/localizable.mixin.js";
-import { defaultTrueConverter } from "../../../utils/boolean.utils.js";
 /**
  * Tag name of the carousel component.
  */
@@ -45,15 +45,15 @@ const ACTIVE_SLIDE_CLASS = "eun-carousel-active-slide";
  * @prop {EunomiaCarouselNavPlacement} [navPlacement='end'] - Where the previous and next buttons sit within the header row. Has no effect while they're overlaid on the viewport instead
  * @attr {EunomiaCarouselNavPlacement} [nav-placement='end'] - Where the previous and next buttons sit within the header row. Has no effect while they're overlaid on the viewport instead
  * @prop {number} [visibleSlides=1] - How many slides are shown at once
- * @prop {boolean} [fullSlides=true] - Whether the visible slides fill the viewport exactly, or leave part of the next one peeking at the edge
+ * @prop {boolean} [fullSlides=false] - Whether the visible slides fill the viewport exactly, or leave part of the next one peeking at the edge
  * @prop {number} [scrollStep=1] - How many slides a previous, next, or dot click advances by, independently of visibleSlides
  * @prop {boolean} [centerSnap=false] - Free continuous scrolling that snaps to whichever slide ends up nearest the center, instead of discrete paging
- * @prop {boolean} [edgeFade=true] - Fades the viewport's edges to hint there's more to scroll, hidden automatically on whichever side is already at its bound. On by default
+ * @prop {boolean} [edgeFade=false] - Fades the viewport's edges to hint there's more to scroll, hidden automatically on whichever side is already at its bound
  * @prop {boolean} [loop=false] - Wraps the previous, next, and autoplay controls around at the bounds instead of stopping there, and keeps the previous and next buttons enabled at the bounds instead of disabling them
  * @prop {boolean} [autoplay=false] - Automatically advances by scrollStep on a set interval. Pauses on hover or focus, but renders no pause or play control of its own, so pair this with a visible control of your own calling the public pause and resume methods, since a moving carousel nobody can stop fails accessibility guidelines
  * @prop {number} [autoplayInterval=4000] - Milliseconds between each autoplay advance
- * @prop {boolean} [showArrows=true] - Shows the previous and next buttons
- * @prop {boolean} [showDots=true] - Shows the pagination dots
+ * @prop {boolean} [showArrows=false] - Shows the previous and next buttons
+ * @prop {boolean} [showDots=false] - Shows the pagination dots
  * @attr {string} aria-label - The accessible name for the carousel region. Recommended whenever a page has more than one carousel, or its purpose isn't already clear from a preceding heading. Defaults to the localized string for the current locale (English: "Carousel")
  * @prop {string} [previousLabel] - The accessible label of the previous control. Defaults to the localized string for the current locale (English: "Previous slide")
  * @attr {string} [previous-label] - The accessible label of the previous control. Defaults to the localized string for the current locale (English: "Previous slide")
@@ -98,6 +98,7 @@ const ACTIVE_SLIDE_CLASS = "eun-carousel-active-slide";
  * @cssprop [--carousel-dot-border-radius] - Sets the corner radius of the pagination dots
  * @cssprop [--carousel-dot-color] - Sets the color of the pagination dots
  * @cssprop [--carousel-dot-active-color] - Sets the color of the active pagination dot
+ * @cssprop [--carousel-focus-outline-color] - Sets the keyboard focus outline color of the track, the previous and next controls and the dots
  * @element eun-carousel
  */
 let EunomiaCarousel = class EunomiaCarousel extends LocalizableMixin(LitElement) {
@@ -136,9 +137,9 @@ let EunomiaCarousel = class EunomiaCarousel extends LocalizableMixin(LitElement)
         /**
          * Whether the visible slides fill the viewport exactly, or leave
          * `--carousel-peek-size` of the next one peeking at the edge.
-         * @default true
+         * @default false
          */
-        this.fullSlides = true;
+        this.fullSlides = false;
         /**
          * How many slides a prev/next click or a dot jump advances by —
          * independent from `visibleSlides`.
@@ -155,10 +156,9 @@ let EunomiaCarousel = class EunomiaCarousel extends LocalizableMixin(LitElement)
          * Fades the viewport's edges to hint there's more to scroll — hidden
          * automatically on whichever side is already at its scroll bound (never
          * shown on the left at the very start, or the right at the very end).
-         * On by default ; `edge-fade="false"` turns it off.
-         * @default true
+         * @default false
          */
-        this.edgeFade = true;
+        this.edgeFade = false;
         /**
          * Wraps prev/next/autoplay around at the bounds instead of stopping
          * there ; also keeps the prev/next buttons enabled at the bounds
@@ -181,14 +181,14 @@ let EunomiaCarousel = class EunomiaCarousel extends LocalizableMixin(LitElement)
         this.autoplayInterval = 4000;
         /**
          * Shows the previous/next buttons.
-         * @default true
+         * @default false
          */
-        this.showArrows = true;
+        this.showArrows = false;
         /**
          * Shows the pagination dots.
-         * @default true
+         * @default false
          */
-        this.showDots = true;
+        this.showDots = false;
         /**
          * Index of the currently active slide (see {@link ACTIVE_SLIDE_CLASS}).
          * @internal
@@ -401,19 +401,31 @@ let EunomiaCarousel = class EunomiaCarousel extends LocalizableMixin(LitElement)
         this.goToIndex(index);
     }
     /**
-     * Reads a numeric custom property (a length such as
-     * `--carousel-nav-icon-size`, or a plain count such as
-     * `--carousel-visible-slides`) off the host as a plain number, pixels
-     * for a length, falling back when unset or invalid.
+     * Reads a plain count custom property, such as
+     * `--carousel-visible-slides`, off the host as a number, falling back
+     * when unset or invalid.
      *
      * @param name the custom property's name.
      * @param fallback the value to use when unset or invalid.
      * @private
      */
-    getCssPixelValue(name, fallback) {
+    getCssNumber(name, fallback) {
         const parsed = Number.parseFloat(getComputedStyle(this).getPropertyValue(name));
         return Number.isNaN(parsed) ? fallback : parsed;
     }
+    /**
+     * Reads a length custom property, such as `--carousel-nav-icon-size`,
+     * off the host in pixels, so tokens like `2rem` are converted rather
+     * than read as `2`. Falls back when unset or invalid.
+     *
+     * @param name the custom property's name.
+     * @param fallback the value to use when unset or invalid.
+     * @private
+     */
+    getCssLength(name, fallback) {
+        const px = readCssLength(this, name);
+        return Number.isNaN(px) ? fallback : px;
+    }
     /**
      * The track's inline padding in pixels, set by
      * `--carousel-track-padding-inline` to let the track bleed past the
@@ -480,8 +492,8 @@ let EunomiaCarousel = class EunomiaCarousel extends LocalizableMixin(LitElement)
      * @private
      */
     syncCssOverrides() {
-        this.effectiveVisibleSlides = Math.max(1, Math.round(this.getCssPixelValue("--carousel-visible-slides", this.visibleSlides)));
-        this.effectiveScrollStep = Math.max(1, Math.round(this.getCssPixelValue("--carousel-scroll-step", this.scrollStep)));
+        this.effectiveVisibleSlides = Math.max(1, Math.round(this.getCssNumber("--carousel-visible-slides", this.visibleSlides)));
+        this.effectiveScrollStep = Math.max(1, Math.round(this.getCssNumber("--carousel-scroll-step", this.scrollStep)));
     }
     /**
      * Measures, from actual rendered geometry, which slide index the track
@@ -574,7 +586,7 @@ let EunomiaCarousel = class EunomiaCarousel extends LocalizableMixin(LitElement)
      * @private
      */
     updateNarrow() {
-        const breakpoint = this.getCssPixelValue("--carousel-responsive-breakpoint", this.responsiveBreakpoint);
+        const breakpoint = this.getCssLength("--carousel-responsive-breakpoint", this.responsiveBreakpoint);
         this.narrow =
             breakpoint > 0 && this.getBoundingClientRect().width < breakpoint;
     }
@@ -869,7 +881,7 @@ let EunomiaCarousel = class EunomiaCarousel extends LocalizableMixin(LitElement)
       >
         <eun-icon
           name=${isPrev ? "chevron_left" : "chevron_right"}
-          size=${this.getCssPixelValue("--carousel-nav-icon-size", 20)}
+          size=${this.getCssLength("--carousel-nav-icon-size", 20)}
         ></eun-icon>
       </button>
     `;
@@ -944,7 +956,7 @@ __decorate([
 ], EunomiaCarousel.prototype, "visibleSlides", void 0);
 __decorate([
     property({
-        converter: defaultTrueConverter,
+        type: Boolean,
         reflect: true,
         attribute: "full-slides",
     })
@@ -957,7 +969,7 @@ __decorate([
 ], EunomiaCarousel.prototype, "centerSnap", void 0);
 __decorate([
     property({
-        converter: defaultTrueConverter,
+        type: Boolean,
         reflect: true,
         attribute: "edge-fade",
     })
@@ -972,10 +984,10 @@ __decorate([
     property({ type: Number, attribute: "autoplay-interval" })
 ], EunomiaCarousel.prototype, "autoplayInterval", void 0);
 __decorate([
-    property({ converter: defaultTrueConverter, attribute: "show-arrows" })
+    property({ type: Boolean, attribute: "show-arrows" })
 ], EunomiaCarousel.prototype, "showArrows", void 0);
 __decorate([
-    property({ converter: defaultTrueConverter, attribute: "show-dots" })
+    property({ type: Boolean, attribute: "show-dots" })
 ], EunomiaCarousel.prototype, "showDots", void 0);
 __decorate([
     property({ attribute: "previous-label" })

package/dist/components/navigation/carousel/carousel.styles.js

@@ -130,8 +130,8 @@ const base = css `
       transparent
     );
   }
-  :host(:is(:not([edge-fade]), [edge-fade="false"])) #viewport::before,
-  :host(:is(:not([edge-fade]), [edge-fade="false"])) #viewport::after {
+  :host(:not([edge-fade])) #viewport::before,
+  :host(:not([edge-fade])) #viewport::after {
     content: none;
   }
 
@@ -172,7 +172,10 @@ const base = css `
     flex: 0 0 var(--_centerPadding, 0px);
   }
   #track:focus-visible {
-    outline-color: var(--eun-color-primary-500, #3d6fff);
+    outline-color: var(
+      --carousel-focus-outline-color,
+      var(--eun-color-primary-500, #3d6fff)
+    );
     outline-offset: 10px;
   }
 
@@ -184,7 +187,7 @@ const base = css `
     transition: transform var(--eun-duration-m, 200ms)
       var(--eun-easing-default, ease);
   }
-  :host([full-slides]:not([full-slides="false"])) ::slotted(:not([slot])) {
+  :host([full-slides]) ::slotted(:not([slot])) {
     --_slideBasis: max(
       var(--carousel-min-slide-width, 220px),
       calc(
@@ -196,8 +199,7 @@ const base = css `
       )
     );
   }
-  :host(:is(:not([full-slides]), [full-slides="false"]))
-    ::slotted(:not([slot])) {
+  :host(:not([full-slides])) ::slotted(:not([slot])) {
     --_slideBasis: max(
       var(--carousel-min-slide-width, 220px),
       calc(
@@ -261,7 +263,10 @@ const base = css `
     );
   }
   .nav:focus-visible {
-    outline-color: var(--eun-color-primary-500, #3d6fff);
+    outline-color: var(
+      --carousel-focus-outline-color,
+      var(--eun-color-primary-500, #3d6fff)
+    );
     outline-offset: 2px;
   }
   .nav:disabled {
@@ -323,7 +328,10 @@ const base = css `
         var(--eun-easing-default, ease);
   }
   .dot:focus-visible {
-    outline-color: var(--eun-color-primary-500, #3d6fff);
+    outline-color: var(
+      --carousel-focus-outline-color,
+      var(--eun-color-primary-500, #3d6fff)
+    );
     outline-offset: 2px;
   }
   .dot[aria-current="true"] {

package/dist/components/navigation/nav-menu/nav-menu.d.ts

@@ -0,0 +1,201 @@
+import { LitElement, PropertyValues, TemplateResult } from "lit";
+import { EunomiaIconName } from "../../content/icon/icon.type.js";
+/**
+ * Tag name of the nav-menu component.
+ */
+export declare const EunomiaNavMenuTagName = "eun-nav-menu";
+/**
+ * What opens the panel : hovering the trigger, or only clicking it.
+ */
+export type EunomiaNavMenuTrigger = "hover" | "click";
+/**
+ * Where the panel opens relative to its trigger.
+ */
+export type EunomiaNavMenuPlacement = "bottom-start" | "bottom" | "bottom-end" | "top-start" | "top" | "top-end";
+declare const EunomiaNavMenu_base: import("../../../utils/constructor.type.js").Constructor<import("../../../mixins/anchor-position.mixin.js").AnchorPositionMixinInterface> & typeof LitElement;
+/**
+ * A site navigation entry that reveals a group of links, such as the pages
+ * of a section, in a panel under its trigger. It follows the disclosure
+ * navigation pattern : the trigger is a button that shows and hides the
+ * panel, and every entry of the panel is a real link, so crawlers follow
+ * it, a middle click opens it in a new tab, and a framework's own link
+ * component keeps its client-side navigation.
+ *
+ * Each direct child is one link, wrapped by the menu in its own list item
+ * without any attribute being written on it : an eun-link, a native anchor,
+ * or a framework's own link component. The trigger shows the current state
+ * on its own as soon as one of the links is the current page, and
+ * announces it to assistive technology.
+ *
+ * @slot [default] - The links, one per direct child : an eun-link, which fills its row on its own, a native anchor, or a framework's own link component
+ * @slot [label] - The trigger's label as light DOM content, so it's part of the server-rendered HTML. Falls back to label when empty
+ * @slot [icon] - Replaces the trigger's leading icon entirely with any content, not just an icon element. Falls back to icon when empty
+ * @slot [chevron] - Replaces the trigger's trailing chevron entirely with any content, not just an icon element. Falls back to chevronIcon when empty. Whatever ends up there still rotates while open, unless that rotation is set to zero
+ * @prop {string} label - The trigger's text. Ignored once something is slotted into label
+ * @prop {import('../../content/icon/icon.type.js').EunomiaIconName} [icon] - An optional decorative icon shown before the label. Ignored once the icon slot has content
+ * @prop {import('../../content/icon/icon.type.js').EunomiaIconName} [chevronIcon='keyboard_arrow_down'] - The trailing chevron icon. Ignored once the chevron slot has content
+ * @prop {boolean} [hideChevron=false] - Hides the trailing chevron, leaving the label alone in the trigger
+ * @prop {'hover' | 'click'} [trigger='hover'] - What opens the panel. With hover, it opens when the pointer rests on the trigger and a click keeps it open. With click, only a click opens and closes it. Touch screens and the keyboard always use the click behavior
+ * @prop {'bottom-start' | 'bottom' | 'bottom-end' | 'top-start' | 'top' | 'top-end'} [placement='bottom-start'] - Where the panel opens relative to the trigger. It flips to the other side on its own when there isn't enough room
+ * @prop {boolean} [open=false] - Whether the panel is currently open
+ * @prop {boolean} [current=false] - Shows the trigger as the current section. Already set on its own when one of the links is the current page, so only needed when the current page isn't one of them
+ * @prop {'light' | 'dark'} [theme='light'] - The color theme of the trigger and the panel. Use dark on a dark background, such as a dark toolbar
+ * @prop {number} [showDelay=100] - Milliseconds the pointer rests on the trigger before the panel opens, with trigger set to hover
+ * @attr {number} [show-delay=100] - Milliseconds the pointer rests on the trigger before the panel opens
+ * @prop {number} [hideDelay=200] - Milliseconds before the panel closes once the pointer leaves it, long enough to move from the trigger into the panel, with trigger set to hover
+ * @attr {number} [hide-delay=200] - Milliseconds before the panel closes once the pointer leaves it
+ * @attr {string} aria-label - The accessible label of the trigger, required when it has no visible label, such as an icon only trigger
+ * @fires {ChangeEvent} eunchange - Fired whenever the panel opens or closes from an interaction. Read the new state from open
+ * @csspart trigger - The trigger button, for effects its custom properties don't cover, such as an active indicator
+ * @csspart panel - The floating panel holding the links
+ * @cssprop [--nav-menu-trigger-color] - Sets the text and icon color of the trigger
+ * @cssprop [--nav-menu-trigger-color-hover] - Sets the text and icon color of the trigger on hover, on keyboard focus and while open
+ * @cssprop [--nav-menu-trigger-color-current] - Sets the text and icon color of the trigger when it's the current section
+ * @cssprop [--nav-menu-trigger-background] - Sets the background of the trigger, transparent by default
+ * @cssprop [--nav-menu-trigger-background-hover] - Sets the background of the trigger on hover, on keyboard focus and while open
+ * @cssprop [--nav-menu-trigger-shadow] - Sets the box shadow of the trigger, none by default
+ * @cssprop [--nav-menu-trigger-shadow-hover] - Sets the box shadow of the trigger on hover, on keyboard focus and while open, falling back to --nav-menu-trigger-shadow
+ * @cssprop [--nav-menu-trigger-font-size] - Sets the font size of the trigger, inherited from the surrounding text by default
+ * @cssprop [--nav-menu-trigger-font-weight] - Sets the font weight of the trigger
+ * @cssprop [--nav-menu-trigger-padding] - Sets the padding of the trigger
+ * @cssprop [--nav-menu-trigger-padding-block] - Sets the vertical padding of the trigger, as one length applied to both sides. Ignored when --nav-menu-trigger-padding is set
+ * @cssprop [--nav-menu-trigger-padding-inline] - Sets the horizontal padding of the trigger, as one length applied to both sides. Ignored when --nav-menu-trigger-padding is set
+ * @cssprop [--nav-menu-trigger-gap] - Sets the gap between the trigger's icon, label and chevron
+ * @cssprop [--nav-menu-trigger-border-radius] - Sets the corner radius of the trigger and its focus ring
+ * @cssprop [--nav-menu-focus-outline-color] - Sets the color of the trigger's focus ring, and of plain anchors in the panel
+ * @cssprop [--nav-menu-icon-size] - Sets the size of the leading icon and the chevron, 1.25em by default so they follow the font size
+ * @cssprop [--nav-menu-chevron-rotation] - Sets the rotation applied to the chevron while open, 180deg by default. Zero disables it
+ * @cssprop [--nav-menu-panel-background] - Sets the background of the panel
+ * @cssprop [--nav-menu-panel-border-color] - Sets the border color of the panel
+ * @cssprop [--nav-menu-panel-border-radius] - Sets the corner radius of the panel
+ * @cssprop [--nav-menu-panel-shadow] - Sets the box shadow of the panel
+ * @cssprop [--nav-menu-panel-padding] - Sets the padding of the panel
+ * @cssprop [--nav-menu-panel-gap] - Sets the gap between the links of the panel
+ * @cssprop [--nav-menu-panel-min-width] - Sets the minimum width of the panel, which is never narrower than the trigger
+ * @cssprop [--nav-menu-panel-max-height] - Sets the maximum height of the panel, beyond which it scrolls
+ * @cssprop [--nav-menu-offset] - Sets the distance between the trigger and the panel
+ * @cssprop [--nav-menu-link-color] - Sets the color of the links in the panel
+ * @cssprop [--nav-menu-link-color-hover] - Sets the color of the links in the panel on hover and focus
+ * @cssprop [--nav-menu-link-color-current] - Sets the color of the current page's link in the panel
+ * @cssprop [--nav-menu-link-background-hover] - Sets the background of the links in the panel on hover and focus
+ * @cssprop [--nav-menu-link-padding] - Sets the padding of the links in the panel
+ * @cssprop [--nav-menu-link-border-radius] - Sets the corner radius of the links in the panel
+ * @cssprop [--nav-menu-transition-duration] - Sets the duration of the panel's open and close animation, the chevron's rotation and the color transitions
+ * @element eun-nav-menu
+ */
+export declare class EunomiaNavMenu extends EunomiaNavMenu_base {
+    #private;
+    /**
+     * Styles to import to the component.
+     *
+     * @static
+     * @internal
+     * @readonly
+     */
+    static readonly styles: import("lit").CSSResult[];
+    /**
+     * Manual slot assignment : each link is assigned to the slot of its own
+     * list item without the menu writing a `slot` attribute on the
+     * consumer's elements, which a framework would then reset or report as
+     * a hydration mismatch. The named slots are assigned by hand too, from
+     * the `slot` attribute the consumer wrote.
+     * @internal
+     */
+    static readonly shadowRootOptions: ShadowRootInit;
+    /**
+     * The trigger's text. Only rendered in the shadow root, so the `label`
+     * slot is preferred wherever the text must be in the server HTML ;
+     * ignored once that slot is filled.
+     */
+    label?: string;
+    /**
+     * Optional decorative icon shown before the label.
+     */
+    icon?: EunomiaIconName;
+    /**
+     * The trailing chevron icon ; ignored once the `chevron` slot has
+     * content.
+     * @default keyboard_arrow_down
+     */
+    chevronIcon: EunomiaIconName;
+    /**
+     * Hides the trailing chevron.
+     * @default false
+     */
+    hideChevron: boolean;
+    /**
+     * What opens the panel. Touch screens and the keyboard always use the
+     * click behavior, since they have no hover.
+     * @default hover
+     */
+    trigger: EunomiaNavMenuTrigger;
+    /**
+     * Where the panel opens relative to the trigger.
+     * @default bottom-start
+     */
+    placement: EunomiaNavMenuPlacement;
+    /**
+     * Indicates whether the panel is currently open.
+     * @default false
+     */
+    open: boolean;
+    /**
+     * Shows the trigger as the current section, on top of the state the
+     * menu derives from its own links.
+     * @default false
+     */
+    current: boolean;
+    /**
+     * The color theme of the trigger and the panel.
+     * @default light
+     */
+    theme: "light" | "dark";
+    /**
+     * Milliseconds the pointer rests on the trigger before the panel opens.
+     * @default 100
+     */
+    showDelay: number;
+    /**
+     * Milliseconds before the panel closes once the pointer leaves it.
+     * @default 200
+     */
+    hideDelay: number;
+    /**
+     * The links, the host's element children without a `slot` attribute.
+     * @internal
+     */
+    private links;
+    /**
+     * Whether one of the links is the current page.
+     * @internal
+     */
+    private hasCurrentLink;
+    /**
+     * The children assigned to each named slot.
+     * @internal
+     */
+    private named;
+    /**
+     * The trigger button.
+     * @internal
+     * @readonly
+     */
+    private readonly triggerEl?;
+    /**
+     * The panel, a manual popover so it renders in the top layer, above a
+     * toolbar's blur or overflow.
+     * @internal
+     * @readonly
+     */
+    private readonly panelEl?;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected updated(changed: PropertyValues): void;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        [EunomiaNavMenuTagName]: EunomiaNavMenu;
+    }
+}
+export {};