@ds-gn/ui 0.0.0-stage → 0.5.0

package/dist/components/NavLink/src/NavLink.js

@@ -0,0 +1,1916 @@
+var __legacyDecorateClassTS = function(decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+    r = Reflect.decorate(decorators, target, key, desc);
+  else
+    for (var i = decorators.length - 1;i >= 0; i--)
+      if (d = decorators[i])
+        r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+
+// components/NavLink/src/NavLink.ts
+import"../../Icon/src/Icon.js";
+import"../../NavDropdownColumn/src/NavDropdownColumn.js";
+
+// common/Base/Base.ts
+import { html, LitElement } from "lit";
+
+// common/helpers/define-element.ts
+var defineElement = (tag, ctor) => {
+  if (typeof customElements === "undefined")
+    return;
+  if (!customElements.get(tag))
+    customElements.define(tag, ctor);
+};
+
+// common/Base/Base.css
+import { css } from "lit";
+var styles = css`/* Base reset in @layer base ensures it comes before utilities in Tailwind v4 cascade
+   This prevents the reset from overriding component utility classes */
+@layer base {
+  :host {
+    display: block;
+    box-sizing: border-box;
+    line-height: 1.5;
+    -webkit-text-size-adjust: 100%;
+    tab-size: 4;
+    font-family: var(
+      --default-font-family,
+      var(--font-sans, ui-sans-serif, system-ui, sans-serif)
+    );
+  }
+
+  *,
+  *::before,
+  *::after {
+    box-sizing: inherit;
+    margin: 0;
+    padding: 0;
+    border: 0 solid;
+  }
+
+  :host h1,
+  :host h2,
+  :host h3,
+  :host h4,
+  :host h5,
+  :host h6 {
+    font-size: inherit;
+    font-weight: inherit;
+    margin: 0;
+    padding: 0;
+  }
+}
+`;
+var Base_default = styles;
+
+// common/Base/Base.ts
+class Base extends LitElement {
+  static styles = Base_default;
+  updateTheme(changedProperties, surface) {
+    if (changedProperties.has("surface")) {
+      if (surface) {
+        this.setAttribute("data-theme", surface);
+      } else {
+        this.removeAttribute("data-theme");
+      }
+    }
+  }
+  emit(name, detail, options = {}) {
+    return this.dispatchEvent(new CustomEvent(name, {
+      detail,
+      bubbles: true,
+      composed: true,
+      cancelable: options.cancelable ?? false
+    }));
+  }
+  render() {
+    return html`<slot></slot>`;
+  }
+}
+defineElement("dsgn-base", Base);
+
+// common/helpers/layout-change.ts
+var listenersByTarget = new Map;
+var observer;
+var lastDocumentWidth;
+var handleEntries = (entries) => {
+  const notify = new Set;
+  for (const entry of entries) {
+    if (entry.target !== document.documentElement) {
+      for (const listener of listenersByTarget.get(entry.target) ?? []) {
+        notify.add(listener);
+      }
+      continue;
+    }
+    const { width } = entry.contentRect;
+    if (width === lastDocumentWidth) {
+      continue;
+    }
+    lastDocumentWidth = width;
+    for (const listeners of listenersByTarget.values()) {
+      for (const listener of listeners) {
+        notify.add(listener);
+      }
+    }
+  }
+  for (const listener of notify) {
+    listener();
+  }
+};
+var observeLayoutChanges = (target, listener) => {
+  if (typeof ResizeObserver === "undefined" || typeof document === "undefined") {
+    return () => {};
+  }
+  if (!observer) {
+    lastDocumentWidth = undefined;
+    observer = new ResizeObserver(handleEntries);
+    observer.observe(document.documentElement);
+  }
+  let listeners = listenersByTarget.get(target);
+  if (!listeners) {
+    listeners = new Set;
+    listenersByTarget.set(target, listeners);
+    observer.observe(target);
+  }
+  listeners.add(listener);
+  return () => {
+    const current = listenersByTarget.get(target);
+    if (!current?.delete(listener)) {
+      return;
+    }
+    if (current.size === 0) {
+      listenersByTarget.delete(target);
+      observer?.unobserve(target);
+    }
+    if (listenersByTarget.size === 0) {
+      observer?.disconnect();
+      observer = undefined;
+      lastDocumentWidth = undefined;
+    }
+  };
+};
+
+// common/controllers/LayoutChangeController.ts
+class LayoutChangeController {
+  constructor(host, onLayoutChange) {
+    this.wantsUpdates = false;
+    this.host = host;
+    this.onLayoutChange = onLayoutChange;
+    host.addController(this);
+  }
+  observe() {
+    this.wantsUpdates = true;
+    this.subscribe();
+  }
+  unobserve() {
+    this.wantsUpdates = false;
+    this.clear();
+  }
+  hostConnected() {
+    if (this.wantsUpdates) {
+      this.subscribe();
+    }
+  }
+  hostDisconnected() {
+    this.clear();
+  }
+  subscribe() {
+    if (this.unsubscribe) {
+      return;
+    }
+    this.unsubscribe = observeLayoutChanges(this.host, this.onLayoutChange);
+  }
+  clear() {
+    this.unsubscribe?.();
+    this.unsubscribe = undefined;
+  }
+}
+
+// common/helpers/enum-validator.ts
+var enumValidator = (propName, enumSet, candidateValue) => {
+  if (!enumSet.has(candidateValue)) {
+    throw new Error(`Invalid prop ${propName} of value ${candidateValue}. Expected one of: ${Array.from(enumSet).join(", ")}`);
+  }
+};
+
+// common/helpers/enum-creator.ts
+var enumCreator = (acceptableValues, propName, type, other = {}) => {
+  const acceptableValuesSet = new Set(acceptableValues);
+  return {
+    type,
+    hasChanged(newValue, oldValue) {
+      if (newValue !== oldValue) {
+        enumValidator(propName, acceptableValuesSet, newValue);
+        return true;
+      }
+      return false;
+    },
+    ...other
+  };
+};
+
+// common/props/surface/surface.props.ts
+var surfaceValues = {
+  LIGHT: "light",
+  DARK: "dark"
+};
+var surfaceProps = enumCreator(Object.values(surfaceValues), "surface", String, { reflect: true });
+
+// components/NavLink/src/NavLink.ts
+import { html as html2, nothing } from "lit";
+import { property, state } from "lit/decorators.js";
+
+// common/controllers/BreakpointController.ts
+import {
+  breakpointXs,
+  breakpointSm,
+  breakpointMd,
+  breakpointLg,
+  breakpointXl,
+  breakpoint2xl
+} from "@ds-gn/tokens";
+var breakpointConfigs = [
+  { name: "xs", cssVarName: "--breakpoint-xs" },
+  { name: "sm", cssVarName: "--breakpoint-sm" },
+  { name: "md", cssVarName: "--breakpoint-md" },
+  { name: "lg", cssVarName: "--breakpoint-lg" },
+  { name: "xl", cssVarName: "--breakpoint-xl" },
+  { name: "xxl", cssVarName: "--breakpoint-2xl" }
+];
+
+class BreakpointRegistry {
+  static instance;
+  constructor() {
+    this.values = new Map([
+      ["xs", breakpointXs],
+      ["sm", breakpointSm],
+      ["md", breakpointMd],
+      ["lg", breakpointLg],
+      ["xl", breakpointXl],
+      ["xxl", breakpoint2xl]
+    ]);
+  }
+  static getInstance() {
+    if (!BreakpointRegistry.instance) {
+      BreakpointRegistry.instance = new BreakpointRegistry;
+    }
+    return BreakpointRegistry.instance;
+  }
+  getValue(breakpoint) {
+    return this.values.get(breakpoint) || "0px";
+  }
+  getAllValues() {
+    return new Map(this.values);
+  }
+}
+
+class BreakpointController {
+  constructor(host) {
+    this.registry = BreakpointRegistry.getInstance();
+    this.mediaQueryLists = new Map;
+    this._currentBreakpoint = "xs";
+    this._initialized = false;
+    this.handleBreakpointChange = (event) => {
+      if (event.matches) {
+        for (const [breakpoint, mql] of this.mediaQueryLists) {
+          if (mql === event.target) {
+            this._currentBreakpoint = breakpoint;
+            if ("currentBreakpoint" in this.host) {
+              this.host.currentBreakpoint = this._currentBreakpoint;
+            }
+            this.host.requestUpdate();
+            console.log("Breakpoint changed to:", breakpoint);
+            break;
+          }
+        }
+      }
+    };
+    this.host = host;
+    host.addController(this);
+  }
+  hostConnected() {
+    this.initializeBreakpoints();
+  }
+  initializeBreakpoints() {
+    if (this._initialized)
+      return;
+    this._initialized = true;
+    const breakpoints = Array.from(this.registry.getAllValues().entries());
+    for (let i = 0;i < breakpoints.length; i++) {
+      const [name, minWidth] = breakpoints[i];
+      const nextBreakpoint = breakpoints[i + 1];
+      let query = `(min-width: ${minWidth})`;
+      if (nextBreakpoint) {
+        const maxWidth = parseInt(nextBreakpoint[1]) - 1;
+        query += ` and (max-width: ${maxWidth}px)`;
+      }
+      const mql = window.matchMedia(query);
+      this.mediaQueryLists.set(name, mql);
+      mql.addEventListener("change", this.handleBreakpointChange);
+      if (mql.matches) {
+        this._currentBreakpoint = name;
+      }
+    }
+    if ("currentBreakpoint" in this.host) {
+      this.host.currentBreakpoint = this._currentBreakpoint;
+    }
+    console.log("BreakpointController initialized, currentz:", this._currentBreakpoint);
+  }
+  hostDisconnected() {
+    this.mediaQueryLists.forEach((mql) => {
+      mql.removeEventListener("change", this.handleBreakpointChange);
+    });
+    this.mediaQueryLists.clear();
+    this._initialized = false;
+    console.log("BreakpointController disconnected");
+  }
+  get current() {
+    return this._currentBreakpoint;
+  }
+  is(breakpoint) {
+    return this._currentBreakpoint === breakpoint;
+  }
+  isAtLeast(breakpoint) {
+    const currentIndex = breakpointConfigs.findIndex((c) => c.name === this._currentBreakpoint);
+    const targetIndex = breakpointConfigs.findIndex((c) => c.name === breakpoint);
+    return currentIndex >= targetIndex;
+  }
+  isAtMost(breakpoint) {
+    const currentIndex = breakpointConfigs.findIndex((c) => c.name === this._currentBreakpoint);
+    const targetIndex = breakpointConfigs.findIndex((c) => c.name === breakpoint);
+    return currentIndex <= targetIndex;
+  }
+  isBetween(min, max) {
+    return this.isAtLeast(min) && this.isAtMost(max);
+  }
+  getBreakpointValue(breakpoint) {
+    return this.registry.getValue(breakpoint);
+  }
+}
+
+// components/Icon/src/icons/arrow-right.ts
+import { svg } from "lit";
+var arrowRight = svg`<path d="M5 12h14" /><path d="m12 5 7 7-7 7" />`;
+// components/Icon/src/icons/chevron-down.ts
+import { svg as svg2 } from "lit";
+var chevronDown = svg2`<path d="m6 9 6 6 6-6" />`;
+// components/NavLink/src/NavLink.css
+import { css as css2 } from "lit";
+var styles2 = css2`/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */
+@layer properties;
+@layer theme {
+  :root, :host {
+    --font-sans: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
+    'Noto Color Emoji';
+    --color-orange-200: oklch(90.1% 0.076 70.697);
+    --color-orange-300: oklch(83.7% 0.128 66.29);
+    --spacing: 0.25rem;
+    --text-xs: 0.75rem;
+    --text-xs--line-height: calc(1 / 0.75);
+    --text-sm: 0.875rem;
+    --text-sm--line-height: calc(1.25 / 0.875);
+    --font-weight-normal: 400;
+    --font-weight-medium: 500;
+    --font-weight-semibold: 600;
+    --leading-snug: 1.375;
+    --radius-lg: 0.5rem;
+    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
+    --default-transition-duration: 150ms;
+    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    --color-accent: inherit;
+    --color-nav-link-dropdown-text-hover: inherit;
+    --color-outline: inherit;
+    --color-page: inherit;
+    --color-surface-default: inherit;
+    --color-surface-elevated: inherit;
+    --color-text-primary: inherit;
+    --color-text-tertiary: inherit;
+    --animate-border-sweep: border-sweep 900ms cubic-bezier(0.4, 0, 0.2, 1);
+  }
+}
+@layer utilities {
+  .collapse {
+    visibility: collapse;
+  }
+  .visible {
+    visibility: visible;
+  }
+  .absolute {
+    position: absolute;
+  }
+  .relative {
+    position: relative;
+  }
+  .static {
+    position: static;
+  }
+  .top-full {
+    top: 100%;
+  }
+  .right-auto {
+    right: auto;
+  }
+  .left-0 {
+    left: calc(var(--spacing) * 0);
+  }
+  .z-50 {
+    z-index: 50;
+  }
+  .col-span-full {
+    grid-column: 1 / -1;
+  }
+  .-mx-2\\.5 {
+    margin-inline: calc(var(--spacing) * -2.5);
+  }
+  .ml-1\\.5 {
+    margin-left: calc(var(--spacing) * 1.5);
+  }
+  .contents {
+    display: contents;
+  }
+  .flex {
+    display: flex;
+  }
+  .grid {
+    display: grid;
+  }
+  .hidden {
+    display: none;
+  }
+  .inline {
+    display: inline;
+  }
+  .inline-block {
+    display: inline-block;
+  }
+  .inline-flex {
+    display: inline-flex;
+  }
+  .w-80 {
+    width: calc(var(--spacing) * 80);
+  }
+  .w-\\[36rem\\] {
+    width: 36rem;
+  }
+  .w-\\[54rem\\] {
+    width: 54rem;
+  }
+  .w-full {
+    width: 100%;
+  }
+  .max-w-\\[calc\\(100vw-2rem\\)\\] {
+    max-width: calc(100vw - 2rem);
+  }
+  .min-w-0 {
+    min-width: calc(var(--spacing) * 0);
+  }
+  .flex-none {
+    flex: none;
+  }
+  .rotate-180 {
+    rotate: 180deg;
+  }
+  .cursor-pointer {
+    cursor: pointer;
+  }
+  .grid-cols-\\[repeat\\(auto-fit\\,minmax\\(15rem\\,1fr\\)\\)\\] {
+    grid-template-columns: repeat(auto-fit,minmax(15rem,1fr));
+  }
+  .flex-col {
+    flex-direction: column;
+  }
+  .items-center {
+    align-items: center;
+  }
+  .items-start {
+    align-items: flex-start;
+  }
+  .gap-0\\.5 {
+    gap: calc(var(--spacing) * 0.5);
+  }
+  .gap-1 {
+    gap: calc(var(--spacing) * 1);
+  }
+  .gap-2 {
+    gap: calc(var(--spacing) * 2);
+  }
+  .rounded-full {
+    border-radius: calc(infinity * 1px);
+  }
+  .rounded-lg {
+    border-radius: var(--radius-lg);
+  }
+  .border {
+    border-style: var(--tw-border-style);
+    border-width: 1px;
+  }
+  .border-0 {
+    border-style: var(--tw-border-style);
+    border-width: 0px;
+  }
+  .border-\\[color-mix\\(in_oklab\\,var\\(--color-accent\\)_45\\%\\,transparent\\)\\] {
+    border-color: color-mix(in srgb,inherit 45%,transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in oklab,var(--color-accent) 45%,transparent);
+    }
+  }
+  .border-outline {
+    border-color: var(--color-outline);
+  }
+  .border-transparent {
+    border-color: transparent;
+  }
+  .bg-page {
+    background-color: var(--color-page);
+  }
+  .bg-surface-elevated {
+    background-color: var(--color-surface-elevated);
+  }
+  .bg-transparent {
+    background-color: transparent;
+  }
+  .p-4 {
+    padding: calc(var(--spacing) * 4);
+  }
+  .px-2\\.5 {
+    padding-inline: calc(var(--spacing) * 2.5);
+  }
+  .px-4 {
+    padding-inline: calc(var(--spacing) * 4);
+  }
+  .py-1 {
+    padding-block: calc(var(--spacing) * 1);
+  }
+  .py-2\\.5 {
+    padding-block: calc(var(--spacing) * 2.5);
+  }
+  .py-\\[7px\\] {
+    padding-block: 7px;
+  }
+  .pt-2 {
+    padding-top: calc(var(--spacing) * 2);
+  }
+  .text-left {
+    text-align: left;
+  }
+  .font-sans {
+    font-family: var(--font-sans);
+  }
+  .text-sm {
+    font-size: var(--text-sm);
+    line-height: var(--tw-leading, var(--text-sm--line-height));
+  }
+  .text-xs {
+    font-size: var(--text-xs);
+    line-height: var(--tw-leading, var(--text-xs--line-height));
+  }
+  .text-\\[13px\\] {
+    font-size: 13px;
+  }
+  .leading-snug {
+    --tw-leading: var(--leading-snug);
+    line-height: var(--leading-snug);
+  }
+  .font-medium {
+    --tw-font-weight: var(--font-weight-medium);
+    font-weight: var(--font-weight-medium);
+  }
+  .font-normal {
+    --tw-font-weight: var(--font-weight-normal);
+    font-weight: var(--font-weight-normal);
+  }
+  .font-semibold {
+    --tw-font-weight: var(--font-weight-semibold);
+    font-weight: var(--font-weight-semibold);
+  }
+  .text-\\[color-mix\\(in_oklab\\,var\\(--color-orange-300\\)_75\\%\\,transparent\\)\\] {
+    color: color-mix(in srgb,oklch(83.7% 0.128 66.29) 75%,transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      color: color-mix(in oklab,var(--color-orange-300) 75%,transparent);
+    }
+  }
+  .text-nav-link-dropdown-text-hover {
+    color: var(--color-nav-link-dropdown-text-hover);
+  }
+  .text-text-primary {
+    color: var(--color-text-primary);
+  }
+  .text-text-tertiary {
+    color: var(--color-text-tertiary);
+  }
+  .no-underline {
+    text-decoration-line: none;
+  }
+  .shadow {
+    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+  .shadow-lg {
+    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+  .ring {
+    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+  .drop-shadow-\\[0_0_18px_color-mix\\(in_oklab\\,_var\\(--color-accent\\)_14\\.625\\%\\,_transparent\\)\\] {
+    --tw-drop-shadow-size: drop-shadow(0 0 18px var(--tw-drop-shadow-color, color-mix(in srgb, inherit 14.625%, transparent)));
+    @supports (color: color-mix(in lab, red, red)) {
+      --tw-drop-shadow-size: drop-shadow(0 0 18px var(--tw-drop-shadow-color, color-mix(in oklab, var(--color-accent) 14.625%, transparent)));
+    }
+    --tw-drop-shadow: var(--tw-drop-shadow-size);
+    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
+  }
+  .transition {
+    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
+  .transition-transform {
+    transition-property: transform, translate, scale, rotate;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
+  .duration-150 {
+    --tw-duration: 150ms;
+    transition-duration: 150ms;
+  }
+  .duration-200 {
+    --tw-duration: 200ms;
+    transition-duration: 200ms;
+  }
+  .\\[background\\:linear-gradient\\(var\\(--color-surface-elevated\\)\\,var\\(--color-surface-elevated\\)\\)_padding-box\\,linear-gradient\\(120deg\\,color-mix\\(in_oklab\\,var\\(--color-accent\\)_45\\%\\,transparent\\)\\,color-mix\\(in_oklab\\,var\\(--color-accent\\)_45\\%\\,transparent\\)\\)_border-box\\] {
+    background: linear-gradient(var(--color-surface-elevated),var(--color-surface-elevated)) padding-box,linear-gradient(120deg,color-mix(in srgb,inherit 45%,transparent),color-mix(in srgb,inherit 45%,transparent)) border-box;
+    @supports (color: color-mix(in lab, red, red)) {
+      background: linear-gradient(var(--color-surface-elevated),var(--color-surface-elevated)) padding-box,linear-gradient(120deg,color-mix(in oklab,var(--color-accent) 45%,transparent),color-mix(in oklab,var(--color-accent) 45%,transparent)) border-box;
+    }
+  }
+  .group-hover\\:block {
+    &:is(:where(.group):hover *) {
+      @media (hover: hover) {
+        display: block;
+      }
+    }
+  }
+  .group-hover\\/nav-link\\:-translate-x-px {
+    &:is(:where(.group\\/nav-link):hover *) {
+      @media (hover: hover) {
+        --tw-translate-x: -1px;
+        translate: var(--tw-translate-x) var(--tw-translate-y);
+      }
+    }
+  }
+  .group-hover\\/nav-link\\:translate-x-\\[3px\\] {
+    &:is(:where(.group\\/nav-link):hover *) {
+      @media (hover: hover) {
+        --tw-translate-x: 3px;
+        translate: var(--tw-translate-x) var(--tw-translate-y);
+      }
+    }
+  }
+  .group-hover\\/nav-link\\:text-\\[var\\(--color-orange-200\\)\\] {
+    &:is(:where(.group\\/nav-link):hover *) {
+      @media (hover: hover) {
+        color: var(--color-orange-200);
+      }
+    }
+  }
+  .group-hover\\/nav-link\\:text-\\[var\\(--color-orange-300\\)\\] {
+    &:is(:where(.group\\/nav-link):hover *) {
+      @media (hover: hover) {
+        color: var(--color-orange-300);
+      }
+    }
+  }
+  .group-hover\\/nav-link\\:text-nav-link-dropdown-text-hover {
+    &:is(:where(.group\\/nav-link):hover *) {
+      @media (hover: hover) {
+        color: var(--color-nav-link-dropdown-text-hover);
+      }
+    }
+  }
+  .group-hover\\/nav-link\\:text-text-primary {
+    &:is(:where(.group\\/nav-link):hover *) {
+      @media (hover: hover) {
+        color: var(--color-text-primary);
+      }
+    }
+  }
+  .hover\\:scale-\\[0\\.98\\] {
+    &:hover {
+      @media (hover: hover) {
+        scale: 0.98;
+      }
+    }
+  }
+  .hover\\:animate-border-sweep {
+    &:hover {
+      @media (hover: hover) {
+        animation: var(--animate-border-sweep);
+      }
+    }
+  }
+  .hover\\:border-\\[color-mix\\(in_oklab\\,var\\(--color-accent\\)_60\\%\\,transparent\\)\\] {
+    &:hover {
+      @media (hover: hover) {
+        border-color: color-mix(in srgb,inherit 60%,transparent);
+        @supports (color: color-mix(in lab, red, red)) {
+          border-color: color-mix(in oklab,var(--color-accent) 60%,transparent);
+        }
+      }
+    }
+  }
+  .hover\\:border-\\[color-mix\\(in_oklab\\,var\\(--color-accent\\)_70\\%\\,transparent\\)\\] {
+    &:hover {
+      @media (hover: hover) {
+        border-color: color-mix(in srgb,inherit 70%,transparent);
+        @supports (color: color-mix(in lab, red, red)) {
+          border-color: color-mix(in oklab,var(--color-accent) 70%,transparent);
+        }
+      }
+    }
+  }
+  .hover\\:bg-surface-default {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--color-surface-default);
+      }
+    }
+  }
+  .hover\\:text-\\[var\\(--color-orange-200\\)\\] {
+    &:hover {
+      @media (hover: hover) {
+        color: var(--color-orange-200);
+      }
+    }
+  }
+  .hover\\:text-nav-link-dropdown-text-hover {
+    &:hover {
+      @media (hover: hover) {
+        color: var(--color-nav-link-dropdown-text-hover);
+      }
+    }
+  }
+  .hover\\:text-text-primary {
+    &:hover {
+      @media (hover: hover) {
+        color: var(--color-text-primary);
+      }
+    }
+  }
+  .hover\\:shadow-\\[inset_0_1px_0_rgba\\(255\\,255\\,255\\,0\\.07\\)\\,0_0_0_3px_color-mix\\(in_oklab\\,var\\(--color-accent\\)_12\\%\\,transparent\\)\\] {
+    &:hover {
+      @media (hover: hover) {
+        --tw-shadow: inset 0 1px 0 var(--tw-shadow-color, rgba(255,255,255,0.07)), 0 0 0 3px var(--tw-shadow-color, color-mix(in srgb,inherit 12%,transparent));
+        @supports (color: color-mix(in lab, red, red)) {
+          --tw-shadow: inset 0 1px 0 var(--tw-shadow-color, rgba(255,255,255,0.07)), 0 0 0 3px var(--tw-shadow-color, color-mix(in oklab,var(--color-accent) 12%,transparent));
+        }
+        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+      }
+    }
+  }
+  .hover\\:shadow-\\[inset_0_1px_3px_rgba\\(0\\,0\\,0\\,0\\.35\\)\\] {
+    &:hover {
+      @media (hover: hover) {
+        --tw-shadow: inset 0 1px 3px var(--tw-shadow-color, rgba(0,0,0,0.35));
+        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+      }
+    }
+  }
+  .hover\\:\\[background\\:linear-gradient\\(var\\(--color-surface-elevated\\)\\,var\\(--color-surface-elevated\\)\\)_padding-box\\,conic-gradient\\(from_var\\(--dsgn-border-sweep-angle\\)\\,color-mix\\(in_oklab\\,var\\(--color-accent\\)_25\\%\\,transparent\\)_0\\%\\,var\\(--color-accent\\)_18\\%\\,color-mix\\(in_oklab\\,var\\(--color-accent\\)_25\\%\\,transparent\\)_40\\%\\,color-mix\\(in_oklab\\,var\\(--color-accent\\)_25\\%\\,transparent\\)_100\\%\\)_border-box\\] {
+    &:hover {
+      @media (hover: hover) {
+        background: linear-gradient(var(--color-surface-elevated),var(--color-surface-elevated)) padding-box,conic-gradient(from var(--dsgn-border-sweep-angle),color-mix(in srgb,inherit 25%,transparent) 0%,var(--color-accent) 18%,color-mix(in srgb,inherit 25%,transparent) 40%,color-mix(in srgb,inherit 25%,transparent) 100%) border-box;
+        @supports (color: color-mix(in lab, red, red)) {
+          background: linear-gradient(var(--color-surface-elevated),var(--color-surface-elevated)) padding-box,conic-gradient(from var(--dsgn-border-sweep-angle),color-mix(in oklab,var(--color-accent) 25%,transparent) 0%,var(--color-accent) 18%,color-mix(in oklab,var(--color-accent) 25%,transparent) 40%,color-mix(in oklab,var(--color-accent) 25%,transparent) 100%) border-box;
+        }
+      }
+    }
+  }
+  .hover\\:\\[background\\:radial-gradient\\(ellipse_closest-side\\,_color-mix\\(in_oklab\\,_var\\(--color-accent\\)_26\\%\\,_transparent\\)_0\\%\\,_color-mix\\(in_oklab\\,_var\\(--color-accent\\)_10\\%\\,_transparent\\)_55\\%\\,_transparent_100\\%\\)\\] {
+    &:hover {
+      @media (hover: hover) {
+        background: radial-gradient(ellipse closest-side, color-mix(in srgb, inherit 26%, transparent) 0%, color-mix(in srgb, inherit 10%, transparent) 55%, transparent 100%);
+        @supports (color: color-mix(in lab, red, red)) {
+          background: radial-gradient(ellipse closest-side, color-mix(in oklab, var(--color-accent) 26%, transparent) 0%, color-mix(in oklab, var(--color-accent) 10%, transparent) 55%, transparent 100%);
+        }
+      }
+    }
+  }
+  .hover\\:\\[background\\:radial-gradient\\(ellipse_closest-side\\,_color-mix\\(in_oklab\\,_var\\(--color-accent\\)_32\\.5\\%\\,_transparent\\)_0\\%\\,_color-mix\\(in_oklab\\,_var\\(--color-accent\\)_12\\.5\\%\\,_transparent\\)_55\\%\\,_transparent_100\\%\\)\\] {
+    &:hover {
+      @media (hover: hover) {
+        background: radial-gradient(ellipse closest-side, color-mix(in srgb, inherit 32.5%, transparent) 0%, color-mix(in srgb, inherit 12.5%, transparent) 55%, transparent 100%);
+        @supports (color: color-mix(in lab, red, red)) {
+          background: radial-gradient(ellipse closest-side, color-mix(in oklab, var(--color-accent) 32.5%, transparent) 0%, color-mix(in oklab, var(--color-accent) 12.5%, transparent) 55%, transparent 100%);
+        }
+      }
+    }
+  }
+  .focus-visible\\:outline-2 {
+    &:focus-visible {
+      outline-style: var(--tw-outline-style);
+      outline-width: 2px;
+    }
+  }
+  .focus-visible\\:outline-offset-2 {
+    &:focus-visible {
+      outline-offset: 2px;
+    }
+  }
+  .focus-visible\\:outline-accent {
+    &:focus-visible {
+      outline-color: var(--color-accent);
+    }
+  }
+  .active\\:scale-95 {
+    &:active {
+      --tw-scale-x: 95%;
+      --tw-scale-y: 95%;
+      --tw-scale-z: 95%;
+      scale: var(--tw-scale-x) var(--tw-scale-y);
+    }
+  }
+  .active\\:shadow-\\[inset_0_2px_5px_rgba\\(0\\,0\\,0\\,0\\.45\\)\\] {
+    &:active {
+      --tw-shadow: inset 0 2px 5px var(--tw-shadow-color, rgba(0,0,0,0.45));
+      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    }
+  }
+  .motion-reduce\\:transition-none {
+    @media (prefers-reduced-motion: reduce) {
+      transition-property: none;
+    }
+  }
+  .motion-reduce\\:hover\\:scale-100 {
+    @media (prefers-reduced-motion: reduce) {
+      &:hover {
+        @media (hover: hover) {
+          --tw-scale-x: 100%;
+          --tw-scale-y: 100%;
+          --tw-scale-z: 100%;
+          scale: var(--tw-scale-x) var(--tw-scale-y);
+        }
+      }
+    }
+  }
+  .motion-reduce\\:hover\\:animate-none {
+    @media (prefers-reduced-motion: reduce) {
+      &:hover {
+        @media (hover: hover) {
+          animation: none;
+        }
+      }
+    }
+  }
+  .motion-reduce\\:active\\:scale-100 {
+    @media (prefers-reduced-motion: reduce) {
+      &:active {
+        --tw-scale-x: 100%;
+        --tw-scale-y: 100%;
+        --tw-scale-z: 100%;
+        scale: var(--tw-scale-x) var(--tw-scale-y);
+      }
+    }
+  }
+  .max-sm\\:pointer-events-auto {
+    @media (width < 40rem) {
+      pointer-events: auto;
+    }
+  }
+  .max-sm\\:pointer-events-none {
+    @media (width < 40rem) {
+      pointer-events: none;
+    }
+  }
+  .max-sm\\:invisible {
+    @media (width < 40rem) {
+      visibility: hidden;
+    }
+  }
+  .max-sm\\:visible {
+    @media (width < 40rem) {
+      visibility: visible;
+    }
+  }
+  .max-sm\\:static {
+    @media (width < 40rem) {
+      position: static;
+    }
+  }
+  .max-sm\\:mx-0 {
+    @media (width < 40rem) {
+      margin-inline: calc(var(--spacing) * 0);
+    }
+  }
+  .max-sm\\:mt-1 {
+    @media (width < 40rem) {
+      margin-top: calc(var(--spacing) * 1);
+    }
+  }
+  .max-sm\\:mb-2 {
+    @media (width < 40rem) {
+      margin-bottom: calc(var(--spacing) * 2);
+    }
+  }
+  .max-sm\\:\\!flex {
+    @media (width < 40rem) {
+      display: flex !important;
+    }
+  }
+  .max-sm\\:\\!grid {
+    @media (width < 40rem) {
+      display: grid !important;
+    }
+  }
+  .max-sm\\:min-h-0 {
+    @media (width < 40rem) {
+      min-height: calc(var(--spacing) * 0);
+    }
+  }
+  .max-sm\\:w-full {
+    @media (width < 40rem) {
+      width: 100%;
+    }
+  }
+  .max-sm\\:max-w-none {
+    @media (width < 40rem) {
+      max-width: none;
+    }
+  }
+  .max-sm\\:min-w-full {
+    @media (width < 40rem) {
+      min-width: 100%;
+    }
+  }
+  .max-sm\\:grid-rows-\\[0fr\\] {
+    @media (width < 40rem) {
+      grid-template-rows: 0fr;
+    }
+  }
+  .max-sm\\:grid-rows-\\[1fr\\] {
+    @media (width < 40rem) {
+      grid-template-rows: 1fr;
+    }
+  }
+  .max-sm\\:flex-col {
+    @media (width < 40rem) {
+      flex-direction: column;
+    }
+  }
+  .max-sm\\:items-stretch {
+    @media (width < 40rem) {
+      align-items: stretch;
+    }
+  }
+  .max-sm\\:justify-between {
+    @media (width < 40rem) {
+      justify-content: space-between;
+    }
+  }
+  .max-sm\\:justify-center {
+    @media (width < 40rem) {
+      justify-content: center;
+    }
+  }
+  .max-sm\\:gap-1 {
+    @media (width < 40rem) {
+      gap: calc(var(--spacing) * 1);
+    }
+  }
+  .max-sm\\:gap-3 {
+    @media (width < 40rem) {
+      gap: calc(var(--spacing) * 3);
+    }
+  }
+  .max-sm\\:overflow-hidden {
+    @media (width < 40rem) {
+      overflow: hidden;
+    }
+  }
+  .max-sm\\:px-0 {
+    @media (width < 40rem) {
+      padding-inline: calc(var(--spacing) * 0);
+    }
+  }
+  .max-sm\\:pt-0 {
+    @media (width < 40rem) {
+      padding-top: calc(var(--spacing) * 0);
+    }
+  }
+  .max-sm\\:text-\\[var\\(--color-orange-200\\)\\] {
+    @media (width < 40rem) {
+      color: var(--color-orange-200);
+    }
+  }
+  .max-sm\\:text-text-primary {
+    @media (width < 40rem) {
+      color: var(--color-text-primary);
+    }
+  }
+  .max-sm\\:opacity-0 {
+    @media (width < 40rem) {
+      opacity: 0%;
+    }
+  }
+  .max-sm\\:opacity-100 {
+    @media (width < 40rem) {
+      opacity: 100%;
+    }
+  }
+  .max-sm\\:transition-\\[grid-template-rows\\,opacity\\,visibility\\] {
+    @media (width < 40rem) {
+      transition-property: grid-template-rows,opacity,visibility;
+      transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+      transition-duration: var(--tw-duration, var(--default-transition-duration));
+    }
+  }
+  .max-sm\\:duration-150 {
+    @media (width < 40rem) {
+      --tw-duration: 150ms;
+      transition-duration: 150ms;
+    }
+  }
+  .max-sm\\:ease-in-out {
+    @media (width < 40rem) {
+      --tw-ease: var(--ease-in-out);
+      transition-timing-function: var(--ease-in-out);
+    }
+  }
+  .max-sm\\:\\[background\\:radial-gradient\\(ellipse_closest-side\\,_color-mix\\(in_oklab\\,_var\\(--color-accent\\)_26\\%\\,_transparent\\)_0\\%\\,_color-mix\\(in_oklab\\,_var\\(--color-accent\\)_10\\%\\,_transparent\\)_55\\%\\,_transparent_100\\%\\)\\] {
+    @media (width < 40rem) {
+      background: radial-gradient(ellipse closest-side, color-mix(in srgb, inherit 26%, transparent) 0%, color-mix(in srgb, inherit 10%, transparent) 55%, transparent 100%);
+      @supports (color: color-mix(in lab, red, red)) {
+        background: radial-gradient(ellipse closest-side, color-mix(in oklab, var(--color-accent) 26%, transparent) 0%, color-mix(in oklab, var(--color-accent) 10%, transparent) 55%, transparent 100%);
+      }
+    }
+  }
+  .max-sm\\:\\[background\\:radial-gradient\\(ellipse_closest-side\\,_color-mix\\(in_oklab\\,_var\\(--color-accent\\)_32\\.5\\%\\,_transparent\\)_0\\%\\,_color-mix\\(in_oklab\\,_var\\(--color-accent\\)_12\\.5\\%\\,_transparent\\)_55\\%\\,_transparent_100\\%\\)\\] {
+    @media (width < 40rem) {
+      background: radial-gradient(ellipse closest-side, color-mix(in srgb, inherit 32.5%, transparent) 0%, color-mix(in srgb, inherit 12.5%, transparent) 55%, transparent 100%);
+      @supports (color: color-mix(in lab, red, red)) {
+        background: radial-gradient(ellipse closest-side, color-mix(in oklab, var(--color-accent) 32.5%, transparent) 0%, color-mix(in oklab, var(--color-accent) 12.5%, transparent) 55%, transparent 100%);
+      }
+    }
+  }
+  .max-sm\\:hover\\:text-\\[var\\(--color-orange-200\\)\\] {
+    @media (width < 40rem) {
+      &:hover {
+        @media (hover: hover) {
+          color: var(--color-orange-200);
+        }
+      }
+    }
+  }
+  .max-sm\\:hover\\:text-text-primary {
+    @media (width < 40rem) {
+      &:hover {
+        @media (hover: hover) {
+          color: var(--color-text-primary);
+        }
+      }
+    }
+  }
+  .max-sm\\:hover\\:\\[background\\:radial-gradient\\(ellipse_closest-side\\,_color-mix\\(in_oklab\\,_var\\(--color-accent\\)_26\\%\\,_transparent\\)_0\\%\\,_color-mix\\(in_oklab\\,_var\\(--color-accent\\)_10\\%\\,_transparent\\)_55\\%\\,_transparent_100\\%\\)\\] {
+    @media (width < 40rem) {
+      &:hover {
+        @media (hover: hover) {
+          background: radial-gradient(ellipse closest-side, color-mix(in srgb, inherit 26%, transparent) 0%, color-mix(in srgb, inherit 10%, transparent) 55%, transparent 100%);
+          @supports (color: color-mix(in lab, red, red)) {
+            background: radial-gradient(ellipse closest-side, color-mix(in oklab, var(--color-accent) 26%, transparent) 0%, color-mix(in oklab, var(--color-accent) 10%, transparent) 55%, transparent 100%);
+          }
+        }
+      }
+    }
+  }
+  .sm\\:block {
+    @media (width >= 40rem) {
+      display: block;
+    }
+  }
+  .sm\\:translate-x-\\[var\\(--dsgn-nav-link-dropdown-shift\\,0px\\)\\] {
+    @media (width >= 40rem) {
+      --tw-translate-x: var(--dsgn-nav-link-dropdown-shift,0px);
+      translate: var(--tw-translate-x) var(--tw-translate-y);
+    }
+  }
+  .\\[\\&\\:\\:slotted\\(\\*\\)\\]\\:w-full {
+    &::slotted(*) {
+      width: 100%;
+    }
+  }
+  .\\[\\&\\:\\:slotted\\(\\*\\)\\]\\:min-w-0 {
+    &::slotted(*) {
+      min-width: calc(var(--spacing) * 0);
+    }
+  }
+}
+@property --dsgn-border-sweep-angle {
+  syntax: '<angle>';
+  inherits: false;
+  initial-value: 0deg;
+}
+@property --tw-border-style {
+  syntax: "*";
+  inherits: false;
+  initial-value: solid;
+}
+@property --tw-leading {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-font-weight {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-shadow-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-shadow-alpha {
+  syntax: "<percentage>";
+  inherits: false;
+  initial-value: 100%;
+}
+@property --tw-inset-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-inset-shadow-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-inset-shadow-alpha {
+  syntax: "<percentage>";
+  inherits: false;
+  initial-value: 100%;
+}
+@property --tw-ring-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-ring-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-inset-ring-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-inset-ring-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-ring-inset {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-ring-offset-width {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 0px;
+}
+@property --tw-ring-offset-color {
+  syntax: "*";
+  inherits: false;
+  initial-value: #fff;
+}
+@property --tw-ring-offset-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-blur {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-brightness {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-contrast {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-grayscale {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-hue-rotate {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-invert {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-opacity {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-saturate {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-sepia {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-drop-shadow {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-drop-shadow-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-drop-shadow-alpha {
+  syntax: "<percentage>";
+  inherits: false;
+  initial-value: 100%;
+}
+@property --tw-drop-shadow-size {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-duration {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-translate-x {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
+@property --tw-translate-y {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
+@property --tw-translate-z {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
+@property --tw-outline-style {
+  syntax: "*";
+  inherits: false;
+  initial-value: solid;
+}
+@property --tw-scale-x {
+  syntax: "*";
+  inherits: false;
+  initial-value: 1;
+}
+@property --tw-scale-y {
+  syntax: "*";
+  inherits: false;
+  initial-value: 1;
+}
+@property --tw-scale-z {
+  syntax: "*";
+  inherits: false;
+  initial-value: 1;
+}
+@property --tw-ease {
+  syntax: "*";
+  inherits: false;
+}
+@keyframes border-sweep {
+  from {
+    --dsgn-border-sweep-angle: 0deg;
+  }
+  to {
+    --dsgn-border-sweep-angle: 360deg;
+  }
+}
+@layer properties {
+  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
+    *, ::before, ::after, ::backdrop {
+      --tw-border-style: solid;
+      --tw-leading: initial;
+      --tw-font-weight: initial;
+      --tw-shadow: 0 0 #0000;
+      --tw-shadow-color: initial;
+      --tw-shadow-alpha: 100%;
+      --tw-inset-shadow: 0 0 #0000;
+      --tw-inset-shadow-color: initial;
+      --tw-inset-shadow-alpha: 100%;
+      --tw-ring-color: initial;
+      --tw-ring-shadow: 0 0 #0000;
+      --tw-inset-ring-color: initial;
+      --tw-inset-ring-shadow: 0 0 #0000;
+      --tw-ring-inset: initial;
+      --tw-ring-offset-width: 0px;
+      --tw-ring-offset-color: #fff;
+      --tw-ring-offset-shadow: 0 0 #0000;
+      --tw-blur: initial;
+      --tw-brightness: initial;
+      --tw-contrast: initial;
+      --tw-grayscale: initial;
+      --tw-hue-rotate: initial;
+      --tw-invert: initial;
+      --tw-opacity: initial;
+      --tw-saturate: initial;
+      --tw-sepia: initial;
+      --tw-drop-shadow: initial;
+      --tw-drop-shadow-color: initial;
+      --tw-drop-shadow-alpha: 100%;
+      --tw-drop-shadow-size: initial;
+      --tw-duration: initial;
+      --tw-translate-x: 0;
+      --tw-translate-y: 0;
+      --tw-translate-z: 0;
+      --tw-outline-style: solid;
+      --tw-scale-x: 1;
+      --tw-scale-y: 1;
+      --tw-scale-z: 1;
+      --tw-ease: initial;
+      --dsgn-border-sweep-angle: 0deg;
+    }
+  }
+}
+`;
+var NavLink_default = styles2;
+
+// components/NavLink/src/NavLink.props.ts
+var navLinkDropdownColumnValues = {
+  ONE: "1",
+  TWO: "2",
+  THREE: "3"
+};
+var navLinkDropdownColumnsProps = enumCreator(Object.values(navLinkDropdownColumnValues), "dropdown-columns", String, { attribute: "dropdown-columns", reflect: true });
+var navLinkVariantValues = {
+  LINK: "link",
+  ACTION: "action",
+  ACTION_SECONDARY: "action-secondary"
+};
+var navLinkVariantProps = enumCreator(Object.values(navLinkVariantValues), "variant", String, { reflect: true });
+var navLinkSecondaryHoverValues = {
+  RING: "ring",
+  SHIMMER: "shimmer",
+  NUDGE: "nudge",
+  DEEPEN: "deepen"
+};
+var navLinkSecondaryHoverProps = enumCreator(Object.values(navLinkSecondaryHoverValues), "secondary-hover", String, { attribute: "secondary-hover", reflect: true });
+var navLinkTargetValues = {
+  SELF: "_self",
+  BLANK: "_blank"
+};
+var navLinkTargetProps = enumCreator(Object.values(navLinkTargetValues), "target", String, { reflect: true });
+
+// ../../node_modules/.bun/clsx@2.1.1/node_modules/clsx/dist/clsx.mjs
+function r(e) {
+  var t, f, n = "";
+  if (typeof e == "string" || typeof e == "number")
+    n += e;
+  else if (typeof e == "object")
+    if (Array.isArray(e)) {
+      var o = e.length;
+      for (t = 0;t < o; t++)
+        e[t] && (f = r(e[t])) && (n && (n += " "), n += f);
+    } else
+      for (f in e)
+        e[f] && (n && (n += " "), n += f);
+  return n;
+}
+function clsx() {
+  for (var e, t, f = 0, n = "", o = arguments.length;f < o; f++)
+    (e = arguments[f]) && (t = r(e)) && (n && (n += " "), n += t);
+  return n;
+}
+var clsx_default = clsx;
+
+// components/NavLink/src/NavLink.styles.ts
+var baseClasses = [
+  "inline-flex",
+  "items-center",
+  "font-sans",
+  "no-underline",
+  "cursor-pointer",
+  "transition",
+  "duration-150",
+  "group/nav-link"
+];
+var glowClass = "hover:[background:radial-gradient(ellipse_closest-side,_color-mix(in_oklab,_var(--color-accent)_26%,_transparent)_0%,_color-mix(in_oklab,_var(--color-accent)_10%,_transparent)_55%,_transparent_100%)]";
+var mobileHoverGlowClass = "max-sm:hover:[background:radial-gradient(ellipse_closest-side,_color-mix(in_oklab,_var(--color-accent)_26%,_transparent)_0%,_color-mix(in_oklab,_var(--color-accent)_10%,_transparent)_55%,_transparent_100%)]";
+var mobileActiveGlowClass = "max-sm:[background:radial-gradient(ellipse_closest-side,_color-mix(in_oklab,_var(--color-accent)_26%,_transparent)_0%,_color-mix(in_oklab,_var(--color-accent)_10%,_transparent)_55%,_transparent_100%)]";
+var actionGlowClass = "hover:[background:radial-gradient(ellipse_closest-side,_color-mix(in_oklab,_var(--color-accent)_32.5%,_transparent)_0%,_color-mix(in_oklab,_var(--color-accent)_12.5%,_transparent)_55%,_transparent_100%)]";
+var actionMobileGlowClass = "max-sm:[background:radial-gradient(ellipse_closest-side,_color-mix(in_oklab,_var(--color-accent)_32.5%,_transparent)_0%,_color-mix(in_oklab,_var(--color-accent)_12.5%,_transparent)_55%,_transparent_100%)]";
+var linkPillClasses = ["px-2.5", "py-2.5", "-mx-2.5", "rounded-lg"];
+var linkClasses = ["text-sm", "text-text-tertiary", ...linkPillClasses];
+var actionBaseClasses = [
+  "text-[13px]",
+  "font-semibold",
+  "border",
+  "rounded-full",
+  "px-4",
+  "py-[7px]",
+  "max-sm:w-full",
+  "max-sm:justify-center"
+];
+var actionClasses = [
+  ...actionBaseClasses,
+  "text-text-primary",
+  "border-outline",
+  "bg-transparent"
+];
+var actionSecondaryClasses = [
+  ...actionBaseClasses,
+  "bg-surface-elevated",
+  "border-[color-mix(in_oklab,var(--color-accent)_45%,transparent)]",
+  "text-nav-link-dropdown-text-hover"
+];
+var secondaryHoverRingClasses = [
+  "hover:border-[color-mix(in_oklab,var(--color-accent)_70%,transparent)]",
+  "hover:shadow-[inset_0_1px_0_rgba(255,255,255,0.07),0_0_0_3px_color-mix(in_oklab,var(--color-accent)_12%,transparent)]"
+];
+var secondaryHoverShimmerClasses = [
+  "border-transparent",
+  "[background:linear-gradient(var(--color-surface-elevated),var(--color-surface-elevated))_padding-box,linear-gradient(120deg,color-mix(in_oklab,var(--color-accent)_45%,transparent),color-mix(in_oklab,var(--color-accent)_45%,transparent))_border-box]",
+  "hover:[background:linear-gradient(var(--color-surface-elevated),var(--color-surface-elevated))_padding-box,conic-gradient(from_var(--dsgn-border-sweep-angle),color-mix(in_oklab,var(--color-accent)_25%,transparent)_0%,var(--color-accent)_18%,color-mix(in_oklab,var(--color-accent)_25%,transparent)_40%,color-mix(in_oklab,var(--color-accent)_25%,transparent)_100%)_border-box]",
+  "hover:animate-border-sweep",
+  "motion-reduce:hover:animate-none"
+];
+var secondaryHoverDeepenClasses = [
+  "hover:bg-surface-default",
+  "hover:border-[color-mix(in_oklab,var(--color-accent)_60%,transparent)]",
+  "hover:shadow-[inset_0_1px_3px_rgba(0,0,0,0.35)]",
+  "hover:scale-[0.98]",
+  "active:scale-95",
+  "active:shadow-[inset_0_2px_5px_rgba(0,0,0,0.45)]",
+  "motion-reduce:hover:scale-100",
+  "motion-reduce:active:scale-100"
+];
+var secondaryHoverClasses = {
+  [navLinkSecondaryHoverValues.RING]: secondaryHoverRingClasses,
+  [navLinkSecondaryHoverValues.SHIMMER]: secondaryHoverShimmerClasses,
+  [navLinkSecondaryHoverValues.NUDGE]: [],
+  [navLinkSecondaryHoverValues.DEEPEN]: secondaryHoverDeepenClasses
+};
+var nudgeLabelClasses = () => clsx_default("inline-block", "transition-transform", "duration-200", "motion-reduce:transition-none", "group-hover/nav-link:-translate-x-px");
+var nudgeArrowClasses = () => clsx_default("ml-1.5", "inline-block", "transition-transform", "duration-200", "motion-reduce:transition-none", "text-[color-mix(in_oklab,var(--color-orange-300)_75%,transparent)]", "group-hover/nav-link:translate-x-[3px]", "group-hover/nav-link:text-[var(--color-orange-300)]");
+var variantClasses = {
+  [navLinkVariantValues.LINK]: linkClasses,
+  [navLinkVariantValues.ACTION]: actionClasses,
+  [navLinkVariantValues.ACTION_SECONDARY]: actionSecondaryClasses
+};
+var glowClasses = (variant) => {
+  if (variant === navLinkVariantValues.ACTION) {
+    return [actionGlowClass, actionMobileGlowClass];
+  }
+  if (variant === navLinkVariantValues.ACTION_SECONDARY) {
+    return [];
+  }
+  return glowClass;
+};
+var hoverTextClass = (surface, isDropdownItem) => {
+  if (isDropdownItem)
+    return "hover:text-nav-link-dropdown-text-hover";
+  if (surface === surfaceValues.LIGHT)
+    return "hover:text-text-primary";
+  return "hover:text-[var(--color-orange-200)]";
+};
+var contentHoverTextClass = (surface, isDropdownItem) => {
+  if (isDropdownItem) {
+    return "group-hover/nav-link:text-nav-link-dropdown-text-hover";
+  }
+  if (surface === surfaceValues.LIGHT) {
+    return "group-hover/nav-link:text-text-primary";
+  }
+  return "group-hover/nav-link:text-[var(--color-orange-200)]";
+};
+var classNames = (variant, surface, isDropdownItem = false, secondaryHover = navLinkSecondaryHoverValues.RING) => clsx_default(baseClasses, variantClasses[variant], !isDropdownItem && glowClasses(variant), variant === navLinkVariantValues.ACTION_SECONDARY && secondaryHoverClasses[secondaryHover], variant === navLinkVariantValues.LINK && hoverTextClass(surface, isDropdownItem));
+var wrapperClasses = () => clsx_default("group", "relative", "inline-flex", "items-center", "max-sm:w-full", "max-sm:flex-col", "max-sm:items-stretch");
+var disclosureTriggerClasses = (surface, open) => clsx_default(baseClasses, linkClasses, "gap-1", "border-0", "bg-transparent", "text-left", "focus-visible:outline-2", "focus-visible:outline-accent", "focus-visible:outline-offset-2", glowClass, hoverTextClass(surface, false), "max-sm:w-full", "max-sm:justify-between", "max-sm:gap-3", "max-sm:mx-0", "max-sm:px-0", mobileHoverGlowClass, surface === surfaceValues.LIGHT ? "max-sm:hover:text-text-primary" : "max-sm:hover:text-[var(--color-orange-200)]", open && [
+  mobileActiveGlowClass,
+  surface === surfaceValues.LIGHT ? "max-sm:text-text-primary" : "max-sm:text-[var(--color-orange-200)]"
+]);
+var disclosureIconClasses = (open) => clsx_default("flex-none", "transition-transform", "duration-150", "motion-reduce:transition-none", open && "rotate-180");
+var linkContentClasses = (hasSubheading, surface, isDropdownItem = false) => clsx_default(hasSubheading ? [
+  "flex",
+  "min-w-0",
+  "flex-col",
+  "items-start",
+  "gap-0.5",
+  "text-left",
+  "font-medium",
+  "leading-snug",
+  "text-text-primary",
+  contentHoverTextClass(surface, isDropdownItem)
+] : "contents");
+var linkSubheadingClasses = () => clsx_default("text-xs", "font-normal", "leading-snug", "text-text-tertiary");
+var dropdownAnchorClasses = [
+  "left-0",
+  "right-auto",
+  "sm:translate-x-[var(--dsgn-nav-link-dropdown-shift,0px)]",
+  "max-w-[calc(100vw-2rem)]"
+];
+var dropdownColumnClasses = {
+  [navLinkDropdownColumnValues.ONE]: [...dropdownAnchorClasses, "w-80"],
+  [navLinkDropdownColumnValues.TWO]: [...dropdownAnchorClasses, "w-[36rem]"],
+  [navLinkDropdownColumnValues.THREE]: [...dropdownAnchorClasses, "w-[54rem]"]
+};
+var dropdownClasses = (open, columns) => clsx_default("absolute", "top-full", "hidden", "pt-2", "z-50", dropdownColumnClasses[columns], "max-sm:w-full", "max-sm:min-w-full", "max-sm:max-w-none", "max-sm:static", "max-sm:!grid", "max-sm:pt-0", "max-sm:transition-[grid-template-rows,opacity,visibility]", "max-sm:duration-150", "max-sm:ease-in-out", "motion-reduce:transition-none", open && "sm:block", open ? [
+  "max-sm:grid-rows-[1fr]",
+  "max-sm:opacity-100",
+  "max-sm:visible",
+  "max-sm:pointer-events-auto"
+] : [
+  "max-sm:grid-rows-[0fr]",
+  "max-sm:opacity-0",
+  "max-sm:invisible",
+  "max-sm:pointer-events-none"
+]);
+var dropdownClipClasses = () => clsx_default("max-sm:min-h-0", "max-sm:overflow-hidden");
+var dropdownPanelClasses = () => clsx_default("p-4", "border", "border-outline", "rounded-lg", "bg-page", "text-text-primary", "shadow-lg", "drop-shadow-[0_0_18px_color-mix(in_oklab,_var(--color-accent)_14.625%,_transparent)]", "max-sm:mt-1", "max-sm:mb-2");
+var dropdownAutoColumnsClass = "grid-cols-[repeat(auto-fit,minmax(15rem,1fr))]";
+var dropdownSlotColumnClasses = {
+  [navLinkDropdownColumnValues.ONE]: ["flex", "flex-col", "gap-1"],
+  [navLinkDropdownColumnValues.TWO]: [
+    "grid",
+    dropdownAutoColumnsClass,
+    "gap-2"
+  ],
+  [navLinkDropdownColumnValues.THREE]: [
+    "grid",
+    dropdownAutoColumnsClass,
+    "gap-2"
+  ]
+};
+var dropdownSlotClasses = (columns) => clsx_default(dropdownSlotColumnClasses[columns], "max-sm:!flex", "max-sm:flex-col", "max-sm:gap-1", "[&::slotted(*)]:min-w-0", "[&::slotted(*)]:w-full");
+var overviewClasses = () => clsx_default("col-span-full", "inline-flex", "w-full", "px-2.5", "py-1", "font-sans", "text-sm", "text-text-tertiary", "no-underline", "cursor-pointer", "hover:text-text-primary", "focus-visible:outline-2", "focus-visible:outline-accent", "focus-visible:outline-offset-2");
+
+// components/NavLink/src/NavLink.ts
+var navLinkDropdownId = 0;
+var dropdownShiftProperty = "--dsgn-nav-link-dropdown-shift";
+var supportsHover = () => typeof window === "undefined" || typeof window.matchMedia !== "function" ? true : window.matchMedia("(hover: hover)").matches;
+var dropdownViewportGutter = 16;
+
+class NavLink extends Base {
+  constructor() {
+    super(...arguments);
+    this.surface = surfaceValues.DARK;
+    this.variant = navLinkVariantValues.LINK;
+    this.secondaryHover = navLinkSecondaryHoverValues.RING;
+    this.href = "";
+    this.target = navLinkTargetValues.SELF;
+    this.rel = "";
+    this.subheading = "";
+    this.submenuLabel = "";
+    this.overviewLabel = "";
+    this.dropdownColumns = navLinkDropdownColumnValues.ONE;
+    this.expanded = false;
+    this.hasDropdown = false;
+    this.pinned = false;
+    this.keyboardDismissed = false;
+    this.dropdownId = `dsgn-nav-link-dropdown-${++navLinkDropdownId}`;
+    this.breakpointController = new BreakpointController(this);
+    this.layoutChangeController = new LayoutChangeController(this, () => this.updateDropdownAlignment());
+    this.handleDropdownSlotChange = () => {
+      this.updateDropdownState();
+    };
+    this.handleLabelSlotChange = () => {
+      this.requestUpdate();
+    };
+    this.toggleDropdown = () => {
+      this.pinned = !this.pinned;
+      if (this.pinned) {
+        this.updateDropdownAlignment();
+      }
+      this.keyboardDismissed = false;
+      this.setExpanded(this.pinned);
+    };
+    this.handleDocumentPointerDown = (event) => {
+      if (!event.composedPath().includes(this)) {
+        this.pinned = false;
+        this.expanded = false;
+      }
+    };
+    this.handlePointerEnter = () => {
+      if (!this.hoverOpensDropdown) {
+        return;
+      }
+      this.keyboardDismissed = false;
+      this.updateDropdownState();
+      if (this.hasDropdown) {
+        this.updateDropdownAlignment();
+        this.setExpanded(true);
+      }
+    };
+    this.handlePointerLeave = () => {
+      if (this.pinned || !this.hoverOpensDropdown || this.matches(":focus-within")) {
+        return;
+      }
+      this.expanded = false;
+    };
+    this.handleFocusIn = () => {
+      if (!this.hoverOpensDropdown || this.keyboardDismissed) {
+        return;
+      }
+      this.updateDropdownState();
+      if (this.hasDropdown) {
+        this.updateDropdownAlignment();
+        this.setExpanded(true);
+      }
+    };
+    this.handleFocusOut = () => {
+      if (this.pinned || !this.hoverOpensDropdown) {
+        return;
+      }
+      requestAnimationFrame(() => {
+        if (!this.matches(":focus-within")) {
+          this.expanded = false;
+          this.keyboardDismissed = false;
+        }
+      });
+    };
+    this.handleKeydown = (event) => {
+      if (event.key === "Escape" && this.expanded && this.hasDropdown) {
+        this.expanded = false;
+        this.pinned = false;
+        this.keyboardDismissed = true;
+        this.shadowRoot?.querySelector("button, a")?.focus();
+      }
+    };
+  }
+  static styles = [Base.styles, NavLink_default];
+  connectedCallback() {
+    super.connectedCallback();
+    this.updateDropdownState();
+  }
+  get computedRel() {
+    const rawRel = this.rel ? this.rel.trim() : "";
+    if (this.target !== navLinkTargetValues.BLANK) {
+      return rawRel || undefined;
+    }
+    const tokens = new Set;
+    for (const token of rawRel.split(/\s+/)) {
+      if (token) {
+        tokens.add(token.toLowerCase());
+      }
+    }
+    tokens.add("noopener");
+    tokens.add("noreferrer");
+    return Array.from(tokens).join(" ");
+  }
+  disconnectedCallback() {
+    document.removeEventListener("pointerdown", this.handleDocumentPointerDown);
+    super.disconnectedCallback();
+  }
+  updated(changedProperties) {
+    super.updated(changedProperties);
+    this.updateTheme(changedProperties, this.surface);
+    if (changedProperties.has("pinned")) {
+      if (this.pinned) {
+        document.addEventListener("pointerdown", this.handleDocumentPointerDown);
+      } else {
+        document.removeEventListener("pointerdown", this.handleDocumentPointerDown);
+      }
+    }
+    if (changedProperties.has("expanded")) {
+      if (this.expanded) {
+        this.layoutChangeController.observe();
+      } else {
+        this.layoutChangeController.unobserve();
+        this.clearDropdownAlignment();
+      }
+    }
+  }
+  updateDropdownState() {
+    this.hasDropdown = this.querySelector('[slot="dropdown"]') !== null;
+    if (!this.hasDropdown) {
+      this.expanded = false;
+      this.pinned = false;
+    }
+  }
+  get labelText() {
+    return Array.from(this.childNodes).filter((node) => node.nodeType === 3 || node instanceof Element && (!node.hasAttribute("slot") || node.getAttribute("slot") === "")).map((node) => node.textContent ?? "").join(" ").trim();
+  }
+  get hasDropdownDestination() {
+    const descendants = Array.from(this.children);
+    while (descendants.length) {
+      const element = descendants.pop();
+      if (!element)
+        continue;
+      if (element.tagName?.toLowerCase() === "dsgn-nav-link" && (element.getAttribute("href") === this.href || ("href" in element) && element.href === this.href)) {
+        return true;
+      }
+      descendants.push(...Array.from(element.children));
+    }
+    return false;
+  }
+  get isDropdownItem() {
+    let ancestor = this.parentElement;
+    while (ancestor) {
+      if (ancestor.tagName?.toLowerCase() === "dsgn-nav-dropdown-column") {
+        return true;
+      }
+      ancestor = ancestor.parentElement;
+    }
+    return false;
+  }
+  get shouldRenderOverview() {
+    return this.hasDropdown && Boolean(this.href) && Boolean(this.overviewLabel) && !this.hasDropdownDestination;
+  }
+  setExpanded(open) {
+    if (this.expanded === open) {
+      return;
+    }
+    this.expanded = open;
+    this.emit("dsgn-nav-link-toggle", { open });
+  }
+  clearDropdownAlignment() {
+    this.style.removeProperty(dropdownShiftProperty);
+  }
+  measureDropdownWidth() {
+    const panel = this.shadowRoot?.querySelector(`#${this.dropdownId}`);
+    if (!panel) {
+      return 0;
+    }
+    const openWidth = panel.getBoundingClientRect().width;
+    if (openWidth) {
+      return openWidth;
+    }
+    panel.style.cssText = "display:block;visibility:hidden";
+    const width = panel.getBoundingClientRect().width;
+    panel.style.cssText = "";
+    return width;
+  }
+  dropdownShift(triggerRect) {
+    const panelWidth = this.measureDropdownWidth();
+    const viewportRight = window.innerWidth - dropdownViewportGutter;
+    if (!panelWidth || triggerRect.left + panelWidth <= viewportRight) {
+      return 0;
+    }
+    const flipped = triggerRect.width - panelWidth;
+    return triggerRect.left + flipped >= dropdownViewportGutter ? flipped : dropdownViewportGutter - triggerRect.left;
+  }
+  updateDropdownAlignment() {
+    this.style.setProperty(dropdownShiftProperty, `${this.dropdownShift(this.getBoundingClientRect())}px`);
+  }
+  get hoverOpensDropdown() {
+    return this.breakpointController.isAtLeast("sm") && supportsHover();
+  }
+  closeDropdown() {
+    this.expanded = false;
+    this.pinned = false;
+  }
+  get isNudgingSecondary() {
+    return this.variant === navLinkVariantValues.ACTION_SECONDARY && this.secondaryHover === navLinkSecondaryHoverValues.NUDGE;
+  }
+  renderLabel() {
+    if (this.isNudgingSecondary) {
+      return html2`<span class="contents"
+        ><span
+          class="${linkContentClasses(Boolean(this.subheading), this.surface, this.isDropdownItem)}"
+          ><span class="${nudgeLabelClasses()}"
+            ><slot @slotchange=${this.handleLabelSlotChange}></slot></span
+          >${this.subheading ? html2`<span class="${linkSubheadingClasses()}"
+                >${this.subheading}</span
+              >` : nothing}</span
+        ><dsgn-icon
+          class="${nudgeArrowClasses()}"
+          .icon=${arrowRight}
+          size="sm"
+          aria-hidden="true"
+        ></dsgn-icon
+      ></span>`;
+    }
+    return html2`<span
+      class="${linkContentClasses(Boolean(this.subheading), this.surface, this.isDropdownItem)}"
+    >
+      <slot @slotchange=${this.handleLabelSlotChange}></slot>
+      ${this.subheading ? html2`
+            <span class="${linkSubheadingClasses()}">${this.subheading}</span>
+          ` : nothing}
+    </span>`;
+  }
+  renderDisclosureTrigger(labelId) {
+    return html2`
+      <button
+        id=${labelId}
+        class="${disclosureTriggerClasses(this.surface, this.expanded)}"
+        type="button"
+        aria-controls=${this.dropdownId}
+        aria-haspopup="true"
+        aria-expanded=${this.expanded ? "true" : "false"}
+        aria-label=${this.labelText ? nothing : this.submenuLabel}
+        @click=${this.toggleDropdown}
+      >
+        ${this.renderLabel()}
+        <dsgn-icon
+          class="${disclosureIconClasses(this.expanded)}"
+          .icon=${chevronDown}
+          size="sm"
+          aria-hidden="true"
+        ></dsgn-icon>
+      </button>
+    `;
+  }
+  renderLinkTrigger(labelId) {
+    return html2`
+      <a
+        id=${labelId}
+        class="${classNames(this.variant, this.surface, this.isDropdownItem, this.secondaryHover)}"
+        href=${this.href || nothing}
+        target=${this.target}
+        rel=${this.computedRel ?? nothing}
+        >${this.renderLabel()}</a
+      >
+    `;
+  }
+  render() {
+    const labelId = `${this.dropdownId}-label`;
+    return html2`
+      <span
+        class="${wrapperClasses()}"
+        @mouseenter=${this.handlePointerEnter}
+        @mouseleave=${this.handlePointerLeave}
+        @focusin=${this.handleFocusIn}
+        @focusout=${this.handleFocusOut}
+        @keydown=${this.handleKeydown}
+      >
+        ${this.hasDropdown ? this.renderDisclosureTrigger(labelId) : this.renderLinkTrigger(labelId)}
+        <div
+          id=${this.dropdownId}
+          class="${dropdownClasses(this.expanded, this.dropdownColumns)}"
+          aria-labelledby=${labelId}
+        >
+          <div class="${dropdownClipClasses()}">
+            <div class="${dropdownPanelClasses()}">
+              <div class="${dropdownSlotClasses(this.dropdownColumns)}">
+                ${this.shouldRenderOverview ? html2`
+                      <a
+                        class="${overviewClasses()}"
+                        href=${this.href}
+                        target=${this.target}
+                        rel=${this.computedRel ?? nothing}
+                        >${this.overviewLabel}</a
+                      >
+                    ` : nothing}
+                <slot
+                  name="dropdown"
+                  @slotchange=${this.handleDropdownSlotChange}
+                ></slot>
+              </div>
+            </div>
+          </div>
+        </div>
+      </span>
+    `;
+  }
+}
+__legacyDecorateClassTS([
+  property({ ...surfaceProps })
+], NavLink.prototype, "surface", undefined);
+__legacyDecorateClassTS([
+  property({ ...navLinkVariantProps })
+], NavLink.prototype, "variant", undefined);
+__legacyDecorateClassTS([
+  property({ ...navLinkSecondaryHoverProps })
+], NavLink.prototype, "secondaryHover", undefined);
+__legacyDecorateClassTS([
+  property({ type: String })
+], NavLink.prototype, "href", undefined);
+__legacyDecorateClassTS([
+  property({ ...navLinkTargetProps })
+], NavLink.prototype, "target", undefined);
+__legacyDecorateClassTS([
+  property({ type: String })
+], NavLink.prototype, "rel", undefined);
+__legacyDecorateClassTS([
+  property({ type: String })
+], NavLink.prototype, "subheading", undefined);
+__legacyDecorateClassTS([
+  property({ type: String, attribute: "submenu-label" })
+], NavLink.prototype, "submenuLabel", undefined);
+__legacyDecorateClassTS([
+  property({ type: String, attribute: "overview-label" })
+], NavLink.prototype, "overviewLabel", undefined);
+__legacyDecorateClassTS([
+  property({ ...navLinkDropdownColumnsProps })
+], NavLink.prototype, "dropdownColumns", undefined);
+__legacyDecorateClassTS([
+  property({ type: Boolean, reflect: true })
+], NavLink.prototype, "expanded", undefined);
+__legacyDecorateClassTS([
+  state()
+], NavLink.prototype, "hasDropdown", undefined);
+__legacyDecorateClassTS([
+  state()
+], NavLink.prototype, "pinned", undefined);
+defineElement("dsgn-nav-link", NavLink);
+export {
+  NavLink
+};