@ds-gn/ui 0.0.0-stage → 0.5.0

package/dist/components/Nav/src/Nav.js

@@ -0,0 +1,750 @@
+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/Nav/src/Nav.ts
+import"../../Container/src/Container.js";
+import"../../Icon/src/Icon.js";
+import"../../NavLink/src/NavLink.js";
+import { html as html2, nothing } from "lit";
+import { property, state } from "lit/decorators.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/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/Nav/src/Nav.ts
+import {
+  containerPaddingValues,
+  containerSizeValues
+} from "../../Container/src/Container.props.js";
+
+// components/Icon/src/icons/menu.ts
+import { svg } from "lit";
+var menu = svg`<line x1="4" x2="20" y1="12" y2="12" /><line x1="4" x2="20" y1="6" y2="6" /><line x1="4" x2="20" y1="18" y2="18" />`;
+// components/Icon/src/icons/x.ts
+import { svg as svg2 } from "lit";
+var x = svg2`<path d="M18 6 6 18" /><path d="m6 6 12 12" />`;
+// components/Nav/src/Nav.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';
+    --spacing: 0.25rem;
+    --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);
+    --radius-input: var(--dsgn-src-radius-input, 0.5rem);
+    --color-accent: inherit;
+    --color-outline: inherit;
+    --color-page: inherit;
+    --color-text-primary: inherit;
+  }
+}
+@layer utilities {
+  .static {
+    position: static;
+  }
+  .sticky {
+    position: sticky;
+  }
+  .block {
+    display: block;
+  }
+  .flex {
+    display: flex;
+  }
+  .hidden {
+    display: none;
+  }
+  .h-16 {
+    height: calc(var(--spacing) * 16);
+  }
+  .w-full {
+    width: 100%;
+  }
+  .flex-shrink-0 {
+    flex-shrink: 0;
+  }
+  .cursor-pointer {
+    cursor: pointer;
+  }
+  .items-center {
+    align-items: center;
+  }
+  .justify-between {
+    justify-content: space-between;
+  }
+  .gap-3 {
+    gap: calc(var(--spacing) * 3);
+  }
+  .gap-4 {
+    gap: calc(var(--spacing) * 4);
+  }
+  .gap-6 {
+    gap: calc(var(--spacing) * 6);
+  }
+  .border-b {
+    border-bottom-style: var(--tw-border-style);
+    border-bottom-width: 1px;
+  }
+  .border-outline {
+    border-color: var(--color-outline);
+  }
+  .bg-page {
+    background-color: var(--color-page);
+  }
+  .bg-transparent {
+    background-color: transparent;
+  }
+  .font-sans {
+    font-family: var(--font-sans);
+  }
+  .text-text-primary {
+    color: var(--color-text-primary);
+  }
+  .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\\:fixed {
+    @media (width < 40rem) {
+      position: fixed;
+    }
+  }
+  .max-sm\\:inset-x-0 {
+    @media (width < 40rem) {
+      inset-inline: calc(var(--spacing) * 0);
+    }
+  }
+  .max-sm\\:top-16 {
+    @media (width < 40rem) {
+      top: calc(var(--spacing) * 16);
+    }
+  }
+  .max-sm\\:bottom-0 {
+    @media (width < 40rem) {
+      bottom: calc(var(--spacing) * 0);
+    }
+  }
+  .max-sm\\:grid {
+    @media (width < 40rem) {
+      display: grid;
+    }
+  }
+  .max-sm\\:size-12 {
+    @media (width < 40rem) {
+      width: calc(var(--spacing) * 12);
+      height: calc(var(--spacing) * 12);
+    }
+  }
+  .max-sm\\:translate-x-0 {
+    @media (width < 40rem) {
+      --tw-translate-x: calc(var(--spacing) * 0);
+      translate: var(--tw-translate-x) var(--tw-translate-y);
+    }
+  }
+  .max-sm\\:translate-x-full {
+    @media (width < 40rem) {
+      --tw-translate-x: 100%;
+      translate: var(--tw-translate-x) var(--tw-translate-y);
+    }
+  }
+  .max-sm\\:flex-col {
+    @media (width < 40rem) {
+      flex-direction: column;
+    }
+  }
+  .max-sm\\:place-items-center {
+    @media (width < 40rem) {
+      place-items: center;
+    }
+  }
+  .max-sm\\:items-stretch {
+    @media (width < 40rem) {
+      align-items: stretch;
+    }
+  }
+  .max-sm\\:gap-0 {
+    @media (width < 40rem) {
+      gap: calc(var(--spacing) * 0);
+    }
+  }
+  .max-sm\\:gap-7 {
+    @media (width < 40rem) {
+      gap: calc(var(--spacing) * 7);
+    }
+  }
+  .max-sm\\:overflow-y-auto {
+    @media (width < 40rem) {
+      overflow-y: auto;
+    }
+  }
+  .max-sm\\:rounded-input {
+    @media (width < 40rem) {
+      border-radius: var(--radius-input);
+    }
+  }
+  .max-sm\\:border-t {
+    @media (width < 40rem) {
+      border-top-style: var(--tw-border-style);
+      border-top-width: 1px;
+    }
+  }
+  .max-sm\\:border-outline {
+    @media (width < 40rem) {
+      border-color: var(--color-outline);
+    }
+  }
+  .max-sm\\:bg-\\[color-mix\\(in_oklab\\,var\\(--color-outline\\)_20\\%\\,transparent\\)\\] {
+    @media (width < 40rem) {
+      background-color: color-mix(in srgb,inherit 20%,transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab,var(--color-outline) 20%,transparent);
+      }
+    }
+  }
+  .max-sm\\:bg-page {
+    @media (width < 40rem) {
+      background-color: var(--color-page);
+    }
+  }
+  .max-sm\\:p-10 {
+    @media (width < 40rem) {
+      padding: calc(var(--spacing) * 10);
+    }
+  }
+  .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-\\[opacity\\,transform\\,visibility\\] {
+    @media (width < 40rem) {
+      transition-property: opacity,transform,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\\:focus-visible\\:outline-2 {
+    @media (width < 40rem) {
+      &:focus-visible {
+        outline-style: var(--tw-outline-style);
+        outline-width: 2px;
+      }
+    }
+  }
+  .max-sm\\:focus-visible\\:outline-offset-2 {
+    @media (width < 40rem) {
+      &:focus-visible {
+        outline-offset: 2px;
+      }
+    }
+  }
+  .max-sm\\:focus-visible\\:outline-accent {
+    @media (width < 40rem) {
+      &:focus-visible {
+        outline-color: var(--color-accent);
+      }
+    }
+  }
+  .max-sm\\:\\[\\&\\:\\:slotted\\(\\*\\)\\]\\:block {
+    @media (width < 40rem) {
+      &::slotted(*) {
+        display: block;
+      }
+    }
+  }
+  .max-sm\\:\\[\\&\\:\\:slotted\\(\\*\\)\\]\\:flex {
+    @media (width < 40rem) {
+      &::slotted(*) {
+        display: flex;
+      }
+    }
+  }
+  .max-sm\\:\\[\\&\\:\\:slotted\\(\\*\\)\\]\\:flex-1 {
+    @media (width < 40rem) {
+      &::slotted(*) {
+        flex: 1;
+      }
+    }
+  }
+  .max-sm\\:\\[\\&\\:\\:slotted\\(\\*\\)\\]\\:items-center {
+    @media (width < 40rem) {
+      &::slotted(*) {
+        align-items: center;
+      }
+    }
+  }
+  .max-sm\\:\\[\\&\\:\\:slotted\\(\\*\\)\\]\\:justify-center {
+    @media (width < 40rem) {
+      &::slotted(*) {
+        justify-content: center;
+      }
+    }
+  }
+  .max-sm\\:\\[\\&\\:\\:slotted\\(\\*\\)\\]\\:border-b {
+    @media (width < 40rem) {
+      &::slotted(*) {
+        border-bottom-style: var(--tw-border-style);
+        border-bottom-width: 1px;
+      }
+    }
+  }
+  .max-sm\\:\\[\\&\\:\\:slotted\\(\\*\\)\\]\\:border-outline {
+    @media (width < 40rem) {
+      &::slotted(*) {
+        border-color: var(--color-outline);
+      }
+    }
+  }
+  .max-sm\\:\\[\\&\\:\\:slotted\\(\\*\\)\\]\\:px-6 {
+    @media (width < 40rem) {
+      &::slotted(*) {
+        padding-inline: calc(var(--spacing) * 6);
+      }
+    }
+  }
+  .max-sm\\:\\[\\&\\:\\:slotted\\(\\*\\)\\]\\:py-5 {
+    @media (width < 40rem) {
+      &::slotted(*) {
+        padding-block: calc(var(--spacing) * 5);
+      }
+    }
+  }
+  .\\[\\:host\\(\\&\\)\\]\\:sticky {
+    :host(&) {
+      position: sticky;
+    }
+  }
+  .\\[\\:host\\(\\&\\)\\]\\:top-0 {
+    :host(&) {
+      top: calc(var(--spacing) * 0);
+    }
+  }
+  .\\[\\:host\\(\\&\\)\\]\\:z-50 {
+    :host(&) {
+      z-index: 50;
+    }
+  }
+}
+@property --dsgn-border-sweep-angle {
+  syntax: '<angle>';
+  inherits: false;
+  initial-value: 0deg;
+}
+@property --tw-border-style {
+  syntax: "*";
+  inherits: false;
+  initial-value: solid;
+}
+@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-duration {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-ease {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-outline-style {
+  syntax: "*";
+  inherits: false;
+  initial-value: solid;
+}
+@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-translate-x: 0;
+      --tw-translate-y: 0;
+      --tw-translate-z: 0;
+      --tw-duration: initial;
+      --tw-ease: initial;
+      --tw-outline-style: solid;
+      --dsgn-border-sweep-angle: 0deg;
+    }
+  }
+}
+`;
+var Nav_default = styles2;
+
+// ../../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/Nav/src/Nav.styles.ts
+var baseClasses = ["w-full", "font-sans", "text-text-primary"];
+var opaqueClasses = ["bg-page", "border-b", "border-outline"];
+var transparentClasses = ["bg-transparent"];
+var classNames = (transparent) => clsx_default(baseClasses, transparent ? transparentClasses : opaqueClasses);
+var stickyHostClasses = [
+  "[:host(&)]:sticky",
+  "[:host(&)]:top-0",
+  "[:host(&)]:z-50"
+];
+var innerClasses = () => clsx_default("flex", "items-center", "justify-between", "h-16");
+var logoClasses = () => clsx_default("flex-shrink-0");
+var rightClasses = (menuOpen) => clsx_default("flex", "items-center", "gap-6", "max-sm:fixed", "max-sm:inset-x-0", "max-sm:top-16", "max-sm:bottom-0", "max-sm:flex-col", "max-sm:items-stretch", "max-sm:gap-7", "max-sm:p-10", "max-sm:overflow-y-auto", "max-sm:bg-page", "max-sm:border-t", "max-sm:border-outline", "max-sm:transition-[opacity,transform,visibility]", "max-sm:duration-150", "max-sm:ease-in-out", menuOpen ? [
+  "max-sm:visible",
+  "max-sm:opacity-100",
+  "max-sm:pointer-events-auto",
+  "max-sm:translate-x-0"
+] : [
+  "max-sm:invisible",
+  "max-sm:opacity-0",
+  "max-sm:pointer-events-none",
+  "max-sm:translate-x-full"
+]);
+var linksClasses = () => clsx_default("flex", "items-center", "gap-4", "max-sm:flex-col", "max-sm:items-stretch", "max-sm:gap-0");
+var actionsClasses = () => clsx_default("flex", "items-center", "gap-3", "max-sm:flex-col", "max-sm:items-stretch");
+var menuButtonClasses = () => clsx_default("hidden", "max-sm:grid", "max-sm:size-12", "max-sm:place-items-center", "max-sm:text-text-primary", "max-sm:bg-[color-mix(in_oklab,var(--color-outline)_20%,transparent)]", "max-sm:rounded-input", "cursor-pointer", "max-sm:focus-visible:outline-2", "max-sm:focus-visible:outline-accent", "max-sm:focus-visible:outline-offset-2");
+var linksSlotClasses = () => clsx_default("max-sm:[&::slotted(*)]:block", "max-sm:[&::slotted(*)]:px-6", "max-sm:[&::slotted(*)]:py-5", "max-sm:[&::slotted(*)]:border-b", "max-sm:[&::slotted(*)]:border-outline");
+var actionsSlotClasses = () => clsx_default("max-sm:[&::slotted(*)]:flex", "max-sm:[&::slotted(*)]:flex-1", "max-sm:[&::slotted(*)]:items-center", "max-sm:[&::slotted(*)]:justify-center");
+
+// components/Nav/src/Nav.ts
+var DEFAULT_MENU_OPEN_LABEL = "Open navigation menu";
+var DEFAULT_MENU_CLOSE_LABEL = "Close navigation menu";
+
+class Nav extends Base {
+  constructor() {
+    super(...arguments);
+    this.surface = surfaceValues.LIGHT;
+    this.sticky = false;
+    this.transparent = false;
+    this.menuOpenLabel = DEFAULT_MENU_OPEN_LABEL;
+    this.menuCloseLabel = DEFAULT_MENU_CLOSE_LABEL;
+    this.menuOpen = false;
+    this.hasNavigationItems = false;
+    this.updateNavigationItems = () => {
+      this.hasNavigationItems = this.hasSlottedNavigationItems();
+      if (!this.hasNavigationItems) {
+        this.menuOpen = false;
+      }
+    };
+    this.handleDropdownToggle = (event) => {
+      const dropdownEvent = event;
+      if (!dropdownEvent.detail.open) {
+        return;
+      }
+      const openedLink = dropdownEvent.composedPath().find((target) => target instanceof HTMLElement && target.tagName === "DSGN-NAV-LINK");
+      this.closeDropdowns(openedLink);
+    };
+    this.handleKeydown = (event) => {
+      if (event.key === "Escape" && this.menuOpen) {
+        this.closeMenu();
+      }
+    };
+    this.handleMenuClick = (event) => {
+      if (event.composedPath().some((target) => target instanceof HTMLAnchorElement)) {
+        queueMicrotask(() => this.closeMenu());
+      }
+    };
+  }
+  static styles = [Base.styles, Nav_default];
+  connectedCallback() {
+    super.connectedCallback();
+    this.updateNavigationItems();
+    this.addEventListener("keydown", this.handleKeydown);
+    this.addEventListener("dsgn-nav-link-toggle", this.handleDropdownToggle);
+  }
+  disconnectedCallback() {
+    this.removeEventListener("keydown", this.handleKeydown);
+    this.removeEventListener("dsgn-nav-link-toggle", this.handleDropdownToggle);
+    super.disconnectedCallback();
+  }
+  firstUpdated() {
+    this.updateNavigationItems();
+  }
+  getNavigationLinks() {
+    return Array.from(this.children).filter((element) => element.tagName === "DSGN-NAV-LINK" && (element.slot === "links" || element.slot === "actions"));
+  }
+  hasSlottedNavigationItems() {
+    return Array.from(this.children).some((element) => element.slot === "links" || element.slot === "actions");
+  }
+  updated(changedProperties) {
+    super.updated(changedProperties);
+    this.updateTheme(changedProperties, this.surface);
+    for (const className of stickyHostClasses) {
+      this.classList.toggle(className, this.sticky);
+    }
+  }
+  toggleMenu() {
+    this.menuOpen = !this.menuOpen;
+    if (!this.menuOpen) {
+      this.closeDropdowns();
+    }
+  }
+  closeMenu() {
+    this.menuOpen = false;
+    this.closeDropdowns();
+  }
+  closeDropdowns(except) {
+    for (const link of this.getNavigationLinks()) {
+      if (link !== except) {
+        link.closeDropdown();
+      }
+    }
+  }
+  render() {
+    return html2`
+      <nav class="${classNames(this.transparent)}">
+        <dsgn-container
+          size="${containerSizeValues.XXL}"
+          padding-x="${containerPaddingValues.SM}"
+          padding-y="${containerPaddingValues.NONE}"
+        >
+          <div class="${innerClasses()}">
+            <div class="${logoClasses()}">
+              <slot name="logo"></slot>
+            </div>
+            ${this.hasNavigationItems ? html2`
+                  <button
+                    class="${menuButtonClasses()}"
+                    type="button"
+                    aria-controls="mobile-nav-menu"
+                    aria-expanded=${this.menuOpen ? "true" : "false"}
+                    aria-label=${this.menuOpen ? this.menuCloseLabel : this.menuOpenLabel}
+                    @click=${this.toggleMenu}
+                  >
+                    <dsgn-icon
+                      .icon=${this.menuOpen ? x : menu}
+                      size="xl"
+                    ></dsgn-icon>
+                  </button>
+                ` : nothing}
+            <div
+              id="mobile-nav-menu"
+              class="${rightClasses(this.menuOpen)}"
+              @click=${this.handleMenuClick}
+            >
+              <div class="${linksClasses()}">
+                <slot
+                  class="${linksSlotClasses()}"
+                  name="links"
+                  @slotchange=${this.updateNavigationItems}
+                ></slot>
+              </div>
+              <div class="${actionsClasses()}">
+                <slot
+                  class="${actionsSlotClasses()}"
+                  name="actions"
+                  @slotchange=${this.updateNavigationItems}
+                ></slot>
+              </div>
+            </div>
+          </div>
+        </dsgn-container>
+      </nav>
+    `;
+  }
+}
+__legacyDecorateClassTS([
+  property({ ...surfaceProps })
+], Nav.prototype, "surface", undefined);
+__legacyDecorateClassTS([
+  property({ type: Boolean, reflect: true })
+], Nav.prototype, "sticky", undefined);
+__legacyDecorateClassTS([
+  property({ type: Boolean, reflect: true })
+], Nav.prototype, "transparent", undefined);
+__legacyDecorateClassTS([
+  property({ type: String, attribute: "menu-open-label" })
+], Nav.prototype, "menuOpenLabel", undefined);
+__legacyDecorateClassTS([
+  property({ type: String, attribute: "menu-close-label" })
+], Nav.prototype, "menuCloseLabel", undefined);
+__legacyDecorateClassTS([
+  state()
+], Nav.prototype, "menuOpen", undefined);
+__legacyDecorateClassTS([
+  state()
+], Nav.prototype, "hasNavigationItems", undefined);
+defineElement("dsgn-nav", Nav);
+export {
+  Nav
+};