@nextrap/nte-nav 1.1.40 → 2.0.0

package/index.scss

@@ -0,0 +1,8 @@
+@forward 'src/scss/default-style';
+@forward 'src/scss/styles/bordered-style';
+@forward 'src/scss/horizontal';
+@forward 'src/scss/main-navigation';
+@forward 'src/scss/responsive';
+@forward 'src/scss/sizes';
+@forward 'src/scss/sub-navigation';
+@forward 'src/scss/vertical';

package/package.json

@@ -1,18 +1,27 @@
 {
     "name": "@nextrap/nte-nav",
-    "version": "1.1.40",
+    "version": "2.0.0",
+    "files": [
+        "*.*",
+        ".agents",
+        "src"
+    ],
     "main": "./index.js",
+    "repository": {
+        "directory": "nextrap-elements/nte-nav",
+        "type": "git",
+        "url": "https://github.com/nextrap/nextrap-monorepo"
+    },
     "dependencies": {
-        "@nextrap/nt-framework": "^1.1.1",
-        "@nextrap/nte-burger": "^1.1.7",
-        "@nextrap/nte-core": "^1.0.2",
-        "@nextrap/nte-offcanvas": "^1.0.16",
-        "@trunkjs/browser-utils": "^1.0.12"
+        "@nextrap/nt-core": "^2.0.0",
+        "@nextrap/style-reset": "^2.0.0",
+        "lit": "^3.3.1"
     },
     "devDependencies": {
-        "@nextrap/style-base": "^1.1.11",
-        "@nextrap/style-reset": "^1.0.0"
+        "@nextrap/style-base": "^2.0.0",
+        "@nextrap/style-typography": "^2.0.0"
     },
     "type": "module",
-    "types": "./index.d.ts"
+    "types": "./index.d.ts",
+    "web-types": "./web-types.json"
 }

package/src/components/nte-nav/nte-nav.d.ts

@@ -0,0 +1,14 @@
+declare const NteNav_base: import('@nextrap/nt-core').InternalNextrapElementType;
+export declare class NteNav extends NteNav_base {
+    static styles: import('lit').CSSResult[];
+    /** Accessible name forwarded to the internal navigation landmark. */
+    accessor ariaLabel: string;
+    protected render(): import('lit-html').TemplateResult<1>;
+    private _onSlotChange;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'nte-nav': NteNav;
+    }
+}
+export {};

package/src/components/nte-nav/nte-nav.scss

@@ -0,0 +1,50 @@
+@use '@nextrap/style-reset' as reset;
+
+@include reset.reset();
+
+// Provides the navigation host with its default flow tokens and intrinsic width.
+:host {
+  --nte-nav-flow: row;
+  --nte-nav-align: stretch;
+  --nte-nav-justify: flex-start;
+  --nte-nav-gap: 0;
+  --nte-nav-item-gap: 0.5rem;
+  --nte-nav-submenu-gap: 0.25rem;
+  --nte-nav-submenu-min-inline-size: 12rem;
+  --nte-nav-submenu-inline-size: max(100%, var(--nte-nav-submenu-min-inline-size));
+  --nte-nav-submenu-max-block-size: min(70vh, 32rem);
+  --nte-nav-submenu-position: absolute;
+  --nte-nav-submenu-inset-block-start: 100%;
+  --nte-nav-submenu-inset-inline-start: 0;
+  --nte-nav-nested-submenu-inset-block-start: 0;
+  --nte-nav-nested-submenu-inset-inline-start: 100%;
+  --nte-nav-submenu-position-area: block-end span-inline-end;
+  --nte-nav-nested-submenu-position-area: inline-end span-block-end;
+  --nte-nav-submenu-enter-transform: translateY(-0.35rem);
+  --nte-nav-nested-submenu-enter-transform: translateX(-0.35rem);
+  --nte-nav-transition-duration: 160ms;
+
+  display: block;
+  inline-size: fit-content;
+  max-inline-size: 100%;
+}
+
+// Keeps the internal navigation landmark available as the list's layout container.
+#nav {
+  display: block;
+}
+
+// Arranges slotted navigation items according to the active orientation tokens.
+#list {
+  display: flex;
+  flex-flow: var(--nte-nav-flow) nowrap;
+  align-items: var(--nte-nav-align);
+  justify-content: var(--nte-nav-justify);
+  gap: var(--nte-nav-gap);
+  min-inline-size: 0;
+}
+
+// Lets the assigned navigation items participate directly in the flex layout.
+#list > slot {
+  display: contents;
+}

package/src/components/nte-nav-item/nte-nav-item.d.ts

@@ -0,0 +1,36 @@
+export type NteNavItemCurrent = 'page' | 'step' | 'location' | 'date' | 'time' | 'true' | '';
+declare const NteNavItem_base: import('@nextrap/nt-core').InternalNextrapElementType;
+export declare class NteNavItem extends NteNavItem_base {
+    static styles: import('lit').CSSResult[];
+    accessor href: string;
+    accessor target: string;
+    accessor rel: string;
+    accessor download: string;
+    accessor current: NteNavItemCurrent;
+    accessor submenuPopover: boolean;
+    /** Accessible name prefix for a submenu disclosure control. */
+    accessor submenuLabel: string;
+    private accessor _hasSubmenu;
+    private accessor _labelText;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected render(): import('lit-html').TemplateResult<1>;
+    private _renderLink;
+    private _renderLabel;
+    private _renderIconOnlyDisclosure;
+    private _renderLabelDisclosure;
+    private _renderIconOnlyPopoverControl;
+    private _renderLabelPopoverControl;
+    private _renderSubmenu;
+    private _renderIndicator;
+    private _submenuAccessibleName;
+    private _onLabelSlotChange;
+    private _onSubmenuSlotChange;
+    private _assignNestedItems;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'nte-nav-item': NteNavItem;
+    }
+}
+export {};

package/src/components/nte-nav-item/nte-nav-item.scss

@@ -0,0 +1,203 @@
+@use '@nextrap/style-reset' as reset;
+
+@include reset.reset();
+
+slot.slot-empty {
+  display: none !important;
+}
+
+:host {
+  --order: 0;
+
+  display: block;
+  position: relative;
+  order: var(--order);
+  min-inline-size: 0;
+}
+
+#link,
+#text,
+#disclosure,
+#toggle {
+  display: flex;
+  align-items: center;
+}
+
+#item {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: stretch;
+  min-block-size: 100%;
+}
+
+#details {
+  display: contents;
+}
+
+#link,
+#text,
+#disclosure {
+  flex: 1 1 auto;
+  min-inline-size: 0;
+  gap: var(--nte-nav-item-gap);
+}
+
+#label {
+  min-inline-size: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+#link,
+#text,
+#disclosure {
+  grid-column: 1 / -1;
+  grid-row: 1;
+}
+
+#item:has(#toggle) > #link {
+  grid-column: 1;
+}
+
+#toggle {
+  grid-column: 2;
+  grid-row: 1;
+  flex: 0 0 auto;
+  justify-content: center;
+}
+
+#disclosure,
+#toggle {
+  anchor-name: --nte-nav-submenu-anchor;
+  list-style: none;
+}
+
+#disclosure::-webkit-details-marker,
+#toggle::-webkit-details-marker {
+  display: none;
+}
+
+#icon:has(> slot.slot-empty) {
+  // Outer ::part(icon) theme rules otherwise win over normal Shadow-DOM declarations.
+  display: none !important;
+}
+
+#icon,
+#indicator {
+  flex: 0 0 auto;
+}
+
+#indicator {
+  inline-size: 1em;
+  block-size: 1em;
+  transition: transform var(--nte-nav-transition-duration) ease;
+}
+
+#details[open] #indicator,
+#item:has(#submenu:popover-open) #indicator {
+  transform: rotate(180deg);
+}
+
+#submenu {
+  z-index: 10;
+  display: grid;
+  grid-column: 1 / -1;
+  grid-row: 2;
+  grid-template-rows: 0fr;
+  inline-size: var(--nte-nav-submenu-inline-size);
+  min-inline-size: var(--nte-nav-submenu-min-inline-size);
+  max-block-size: var(--nte-nav-submenu-max-block-size);
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
+  position: var(--nte-nav-submenu-position);
+  inset-block-start: var(--nte-nav-submenu-inset-block-start);
+  inset-inline-start: var(--nte-nav-submenu-inset-inline-start);
+  opacity: 0;
+  transform: var(--nte-nav-submenu-enter-transform);
+  visibility: hidden;
+  pointer-events: none;
+  transition:
+    grid-template-rows var(--nte-nav-transition-duration) ease,
+    opacity var(--nte-nav-transition-duration) ease,
+    transform var(--nte-nav-transition-duration) ease,
+    visibility var(--nte-nav-transition-duration) allow-discrete;
+}
+
+#details[open] #submenu {
+  grid-template-rows: 1fr;
+  margin-block-start: var(--nte-nav-submenu-gap);
+  opacity: 1;
+  transform: none;
+  visibility: visible;
+  pointer-events: auto;
+}
+
+#submenu[popover] {
+  inline-size: max-content;
+  max-inline-size: calc(100vw - 2rem);
+  margin: var(--nte-nav-submenu-gap) 0 0;
+  overflow: hidden;
+  position: fixed;
+  position-anchor: --nte-nav-submenu-anchor;
+  position-area: var(--nte-nav-submenu-position-area);
+  position-try-fallbacks: flip-block, flip-inline;
+  inset: auto;
+  transition:
+    opacity var(--nte-nav-transition-duration) ease,
+    transform var(--nte-nav-transition-duration) ease,
+    display var(--nte-nav-transition-duration) allow-discrete,
+    overlay var(--nte-nav-transition-duration) allow-discrete;
+}
+
+@supports (inline-size: anchor-size(inline)) {
+  #submenu[popover] {
+    inline-size: max(anchor-size(inline), var(--nte-nav-submenu-min-inline-size));
+  }
+}
+
+#submenu[popover]:not(:popover-open) {
+  display: none;
+}
+
+#submenu[popover]:popover-open {
+  display: grid;
+  grid-template-rows: 1fr;
+  opacity: 1;
+  transform: none;
+  visibility: visible;
+  pointer-events: auto;
+}
+
+@starting-style {
+  #submenu[popover]:popover-open {
+    opacity: 0;
+    transform: var(--nte-nav-submenu-enter-transform);
+  }
+}
+
+#submenu-inner {
+  min-block-size: 0;
+  overflow: auto;
+}
+
+#submenu slot {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+}
+
+#submenu slot::slotted(nte-nav-item) {
+  --nte-nav-submenu-inset-block-start: var(--nte-nav-nested-submenu-inset-block-start);
+  --nte-nav-submenu-inset-inline-start: var(--nte-nav-nested-submenu-inset-inline-start);
+  --nte-nav-submenu-position-area: var(--nte-nav-nested-submenu-position-area);
+  --nte-nav-submenu-enter-transform: var(--nte-nav-nested-submenu-enter-transform);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  #indicator,
+  #submenu {
+    transition-duration: 0.01ms;
+  }
+}

package/src/scss/_default-style.scss

@@ -0,0 +1,130 @@
+// Defines the shared visual baseline for navigation links, states, and parts.
+@mixin default-style(
+  $background: transparent,
+  $color: var(--nt-text, #212529),
+  $hover-background: color-mix(in srgb, var(--nt-primary, #0d6efd) 10%, transparent),
+  $hover-color: var(--nt-primary, #0d6efd),
+  $current-background: var(--nt-primary, #0d6efd),
+  $current-color: var(--nt-text-on-primary, #fff),
+  $submenu-background: var(--nt-body, #fff),
+  $submenu-border: 1px solid color-mix(in srgb, var(--nt-text, #212529) 14%, transparent),
+  $submenu-radius: calc(var(--nt-border-radius, 0.375rem) * 2),
+  $submenu-shadow: 0 1rem 2.5rem color-mix(in srgb, var(--nt-dark, #212529) 18%, transparent),
+  $focus-color: var(--nt-primary, #0d6efd)
+) {
+  --nte-nav-item-gap: 0.5rem;
+  --nte-nav-submenu-gap: 0.35rem;
+  --nte-nav-transition-duration: 160ms;
+
+  // Applies the baseline navigation foreground and background colors.
+  &::part(nav) {
+    color: #{$color};
+    background: #{$background};
+  }
+
+  // Keeps navigation items aligned with the height of their navigation line.
+  & nte-nav-item::part(item) {
+    min-block-size: 100%;
+  }
+
+  // Normalizes sizing and typography across all interactive navigation parts.
+  & nte-nav-item::part(link),
+  & nte-nav-item::part(text),
+  & nte-nav-item::part(disclosure),
+  & nte-nav-item::part(toggle) {
+    box-sizing: border-box;
+    color: inherit;
+    font: inherit;
+  }
+
+  // Provides the default spacing and typography for visible item content.
+  & nte-nav-item::part(link),
+  & nte-nav-item::part(text),
+  & nte-nav-item::part(disclosure) {
+    gap: 0.5rem;
+    padding: 0.7rem 1rem;
+    font-size: 1rem;
+    line-height: 1.25;
+    text-decoration: none;
+  }
+
+  // Makes disclosure controls compact, clipped, and keyboard-usable.
+  & nte-nav-item::part(disclosure),
+  & nte-nav-item::part(toggle) {
+    appearance: none;
+    min-inline-size: 0;
+    overflow: hidden;
+    border: 0;
+    background: transparent;
+    cursor: pointer;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
+  // Reserves a predictable hit area for submenu toggle controls.
+  & nte-nav-item::part(toggle) {
+    align-self: stretch;
+    min-inline-size: 2.5rem;
+    padding: 0.5rem;
+  }
+
+  // Animates color and background changes for interactive states.
+  & nte-nav-item::part(link),
+  & nte-nav-item::part(text),
+  & nte-nav-item::part(disclosure),
+  & nte-nav-item::part(toggle) {
+    transition:
+      color 160ms ease,
+      background-color 160ms ease;
+  }
+
+  // Highlights navigation parts while the pointer is over them.
+  & nte-nav-item::part(link):hover,
+  & nte-nav-item::part(text):hover,
+  & nte-nav-item::part(disclosure):hover,
+  & nte-nav-item::part(toggle):hover {
+    color: #{$hover-color};
+    background-color: #{$hover-background};
+  }
+
+  // Provides a visible keyboard focus indicator for actionable parts.
+  & nte-nav-item::part(link):focus-visible,
+  & nte-nav-item::part(disclosure):focus-visible,
+  & nte-nav-item::part(toggle):focus-visible {
+    position: relative;
+    z-index: 1;
+    outline: 2px solid #{$focus-color};
+    outline-offset: -2px;
+  }
+
+  // Marks the current page with the active navigation colors.
+  & nte-nav-item[current='page']::part(link),
+  & nte-nav-item[current='true']::part(link) {
+    color: #{$current-color};
+    background: #{$current-background};
+  }
+
+  // Aligns optional navigation icons with the item label.
+  & nte-nav-item::part(icon) {
+    display: inline-grid;
+    inline-size: 1.1em;
+    block-size: 1.1em;
+    place-items: center;
+  }
+
+  // Pushes submenu indicators to the trailing edge of the item.
+  & nte-nav-item::part(indicator) {
+    flex: 0 0 auto;
+    margin-inline-start: auto;
+  }
+
+  // Reduces interactive transitions when the user requests less motion.
+  @media (prefers-reduced-motion: reduce) {
+    & nte-nav-item::part(link),
+    & nte-nav-item::part(text),
+    & nte-nav-item::part(disclosure),
+    & nte-nav-item::part(toggle) {
+      transition-duration: 0.01ms;
+    }
+  }
+}

package/src/scss/_horizontal.scss

@@ -0,0 +1,51 @@
+// Configures the navigation for horizontal items and native popover submenus.
+@mixin horizontal($justify: flex-start, $gap: 0) {
+  --nte-nav-flow: row;
+  --nte-nav-align: stretch;
+  --nte-nav-justify: #{$justify};
+  --nte-nav-gap: #{$gap};
+  --nte-nav-submenu-position: absolute;
+  --nte-nav-submenu-inset-block-start: 100%;
+  --nte-nav-submenu-inset-inline-start: 0;
+  --nte-nav-nested-submenu-inset-block-start: 0;
+  --nte-nav-nested-submenu-inset-inline-start: 100%;
+  --nte-nav-submenu-enter-transform: translateY(-0.35rem);
+  --nte-nav-nested-submenu-enter-transform: translateX(-0.35rem);
+  --nte-nav-submenu-inline-size: max(100%, var(--nte-nav-submenu-min-inline-size));
+  --nte-nav-submenu-max-block-size: min(70vh, 32rem);
+  --nte-nav-item-min-inline-size: 100px;
+  --nte-nav-item-max-inline-size: 20rem;
+
+  // Keeps horizontal items in one row with the requested alignment and gap.
+  &::part(list) {
+    flex-flow: row nowrap;
+    align-items: stretch;
+    justify-content: #{$justify};
+    gap: #{$gap};
+  }
+
+  // Gives horizontal popover submenus their dropdown surface and elevation.
+  & nte-nav-item::part(submenu) {
+    padding: 0;
+    color: var(--nt-text, #212529);
+    background: var(--nt-body, #fff);
+    border: 1px solid color-mix(in srgb, var(--nt-text, #212529) 14%, transparent);
+    border-radius: calc(var(--nt-border-radius, 0.375rem) * 2);
+    box-shadow: 0 1rem 2.5rem color-mix(in srgb, var(--nt-dark, #212529) 18%, transparent);
+  }
+
+  // Constrains main-level items so long labels can shrink and ellipsize.
+  & > nte-nav-item {
+    flex: 0 1 auto;
+    inline-size: auto;
+    min-inline-size: 100px;
+    max-inline-size: min(100%, var(--nte-nav-item-max-inline-size));
+    overflow: hidden;
+  }
+
+  // Applies the horizontal minimum width to items that own a popover submenu.
+  & > nte-nav-item[submenu-popover] {
+    flex-shrink: 1;
+    min-inline-size: var(--nte-nav-item-min-inline-size);
+  }
+}

package/src/scss/_main-navigation.scss

@@ -0,0 +1,20 @@
+@use 'default-style' as style;
+@use 'sizes' as size;
+
+// Provides the default navigation composition while allowing themes to define its color contract.
+@mixin main-navigation(
+  $color: var(--nt-text, #212529),
+  $hover-color: var(--nt-primary, #0d6efd),
+  $current-background: var(--nt-primary, #0d6efd),
+  $current-color: var(--nt-text-on-primary, #fff),
+  $focus-color: var(--nt-primary, #0d6efd)
+) {
+  @include style.default-style(
+    $color: $color,
+    $hover-color: $hover-color,
+    $current-background: $current-background,
+    $current-color: $current-color,
+    $focus-color: $focus-color
+  );
+  @include size.size-large();
+}

package/src/scss/_responsive.scss

@@ -0,0 +1,10 @@
+@use 'horizontal' as orientation-horizontal;
+@use 'vertical' as orientation-vertical;
+
+@mixin responsive($breakpoint: 48rem, $horizontal-justify: flex-start) {
+  @include orientation-vertical.vertical();
+
+  @media (min-width: $breakpoint) {
+    @include orientation-horizontal.horizontal($horizontal-justify);
+  }
+}

package/src/scss/_sizes.scss

@@ -0,0 +1,56 @@
+@mixin size-small() {
+  & nte-nav-item::part(link),
+  & nte-nav-item::part(text),
+  & nte-nav-item::part(disclosure) {
+    padding-block: 0.45rem;
+    padding-inline: 0.7rem;
+    font-size: 0.875rem;
+  }
+
+  & nte-nav-item::part(toggle) {
+    min-inline-size: 2rem;
+  }
+
+  & nte-nav-item::part(icon) {
+    inline-size: 1rem;
+    block-size: 1rem;
+  }
+}
+
+@mixin size-medium() {
+  & nte-nav-item::part(link),
+  & nte-nav-item::part(text),
+  & nte-nav-item::part(disclosure) {
+    padding-block: 0.7rem;
+    padding-inline: 1rem;
+    font-size: 1rem;
+  }
+
+  & nte-nav-item::part(toggle) {
+    min-inline-size: 2.5rem;
+  }
+
+  & nte-nav-item::part(icon) {
+    inline-size: 1.1rem;
+    block-size: 1.1rem;
+  }
+}
+
+@mixin size-large() {
+  & nte-nav-item::part(link),
+  & nte-nav-item::part(text),
+  & nte-nav-item::part(disclosure) {
+    padding-block: 0.9rem;
+    padding-inline: 1.25rem;
+    font-size: 1.125rem;
+  }
+
+  & nte-nav-item::part(toggle) {
+    min-inline-size: 3rem;
+  }
+
+  & nte-nav-item::part(icon) {
+    inline-size: 1.2rem;
+    block-size: 1.2rem;
+  }
+}

package/src/scss/_sub-navigation.scss

@@ -0,0 +1,11 @@
+@use 'default-style' as style;
+@use 'sizes' as size;
+
+@mixin sub-navigation() {
+  @include style.default-style(
+    $background: transparent,
+    $hover-background: color-mix(in srgb, var(--nt-primary, #0d6efd) 8%, transparent),
+    $submenu-shadow: 0 0.75rem 2rem color-mix(in srgb, var(--nt-dark, #212529) 14%, transparent)
+  );
+  @include size.size-small();
+}

package/src/scss/_vertical.scss

@@ -0,0 +1,50 @@
+// Configures the navigation for full-width inline disclosure submenus.
+@mixin vertical($gap: 0.2rem) {
+  --nte-nav-flow: column;
+  --nte-nav-align: stretch;
+  --nte-nav-justify: flex-start;
+  --nte-nav-gap: #{$gap};
+  --nte-nav-submenu-position: static;
+  --nte-nav-submenu-inset-block-start: auto;
+  --nte-nav-submenu-inset-inline-start: auto;
+  --nte-nav-nested-submenu-inset-block-start: auto;
+  --nte-nav-nested-submenu-inset-inline-start: auto;
+  --nte-nav-submenu-enter-transform: translateY(-0.35rem);
+  --nte-nav-nested-submenu-enter-transform: translateY(-0.35rem);
+  --nte-nav-submenu-inline-size: 100%;
+  --nte-nav-submenu-min-inline-size: 0;
+  --nte-nav-submenu-max-block-size: none;
+  inline-size: 100%;
+
+  // Removes dropdown decoration while keeping vertical submenus transparent.
+  & nte-nav-item::part(submenu) {
+    background: transparent;
+    border: 0;
+    border-radius: 0;
+    box-shadow: none;
+  }
+
+  // Indents only nested item content while preserving full-width hover surfaces.
+  & nte-nav-item nte-nav-item::part(link),
+  & nte-nav-item nte-nav-item::part(text),
+  & nte-nav-item nte-nav-item::part(disclosure) {
+    padding-inline-start: calc(1rem + var(--nte-nav-inline-submenu-indent, 1rem));
+  }
+
+  // Stacks vertical items and disclosure submenus in normal document flow.
+  &::part(list) {
+    flex-flow: column nowrap;
+    align-items: stretch;
+    justify-content: flex-start;
+    gap: #{$gap};
+  }
+
+  // Makes every top-level vertical item fill the navigation width.
+  & > nte-nav-item,
+  & > nte-nav-item::part(item),
+  & > nte-nav-item::part(link),
+  & > nte-nav-item::part(text),
+  & > nte-nav-item::part(disclosure) {
+    inline-size: 100%;
+  }
+}