@jsekulowicz/ds-components 0.5.4 → 0.6.0

package/dist/organisms/navbar/navbar.js

@@ -1,104 +0,0 @@
-var __decorate = (this && this.__decorate) || 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;
-};
-import { html } from 'lit';
-import { property, state } from 'lit/decorators.js';
-import { DsElement } from '@jsekulowicz/ds-core';
-import { navbarStyles } from './navbar.styles.js';
-import '../../atoms/icon/define.js';
-import '../../atoms/icon/icons/bars-3.js';
-/**
- * @tag ds-navbar
- * @summary Top-bar navigation shell. Collapses to a hamburger menu below the configured breakpoint.
- * @slot brand - Logo or wordmark (left).
- * @slot default - ds-nav-item children (center, collapses on mobile).
- * @slot actions - Buttons / user menu (right).
- * @csspart bar - The internal `<nav>` element.
- * @csspart brand - The brand wrapper.
- * @csspart links - The collapsible links wrapper (mobile menu when expanded).
- * @csspart actions - The actions wrapper.
- * @csspart toggle - The hamburger toggle button.
- * @csspart menu - The expandable links container.
- */
-export class DsNavbar extends DsElement {
-    constructor() {
-        super(...arguments);
-        this.label = 'Primary';
-        this.menuLabel = 'Menu';
-        this._open = false;
-        this._hasLinks = false;
-        this.#syncLinksPresence = () => {
-            const slot = this.shadowRoot?.querySelector('.menu slot:not([name])');
-            this._hasLinks = Boolean(slot?.assignedNodes({ flatten: true }).some(isContentNode));
-        };
-        this.#onLinksSlotChange = () => {
-            this.#syncLinksPresence();
-        };
-        this.#onDocumentKeydown = (event) => {
-            if (event.key === 'Escape' && this._open) {
-                this._open = false;
-                this.removeAttribute('data-open');
-                this.shadowRoot?.querySelector('.toggle')?.focus();
-            }
-        };
-        this.#onToggle = () => {
-            this._open = !this._open;
-            this.toggleAttribute('data-open', this._open);
-        };
-    }
-    static { this.styles = [...DsElement.styles, navbarStyles]; }
-    connectedCallback() {
-        super.connectedCallback();
-        document.addEventListener('keydown', this.#onDocumentKeydown);
-    }
-    disconnectedCallback() {
-        super.disconnectedCallback();
-        document.removeEventListener('keydown', this.#onDocumentKeydown);
-    }
-    #syncLinksPresence;
-    #onLinksSlotChange;
-    #onDocumentKeydown;
-    #onToggle;
-    render() {
-        const menuId = `${this.uid}-menu`;
-        return html `<nav part="bar" aria-label=${this.label}>
-      <div class="brand" part="brand"><slot name="brand"></slot></div>
-      <div class="links" part="links" ?hidden=${!this._hasLinks}>
-        <button
-          class="toggle"
-          part="toggle"
-          type="button"
-          aria-label=${this.menuLabel}
-          aria-expanded=${this._open ? 'true' : 'false'}
-          aria-controls=${menuId}
-          @click=${this.#onToggle}
-        >
-          <ds-icon name="bars-3" size="3xl"></ds-icon>
-        </button>
-        <div class="menu" part="menu" id=${menuId} role="list">
-          <slot @slotchange=${this.#onLinksSlotChange}></slot>
-        </div>
-      </div>
-      <div class="actions" part="actions"><slot name="actions"></slot></div>
-    </nav>`;
-    }
-}
-__decorate([
-    property()
-], DsNavbar.prototype, "label", void 0);
-__decorate([
-    property({ attribute: 'menu-label' })
-], DsNavbar.prototype, "menuLabel", void 0);
-__decorate([
-    state()
-], DsNavbar.prototype, "_open", void 0);
-__decorate([
-    state()
-], DsNavbar.prototype, "_hasLinks", void 0);
-function isContentNode(node) {
-    return node.nodeType !== Node.TEXT_NODE || Boolean(node.textContent?.trim());
-}
-//# sourceMappingURL=navbar.js.map

package/dist/organisms/navbar/navbar.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"navbar.js","sourceRoot":"","sources":["../../../src/organisms/navbar/navbar.ts"],"names":[],"mappings":"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"}

package/dist/organisms/navbar/navbar.styles.d.ts

@@ -1,2 +0,0 @@
-export declare const navbarStyles: import("lit").CSSResult;
-//# sourceMappingURL=navbar.styles.d.ts.map

package/dist/organisms/navbar/navbar.styles.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"navbar.styles.d.ts","sourceRoot":"","sources":["../../../src/organisms/navbar/navbar.styles.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,YAAY,yBAoFxB,CAAC"}

package/dist/organisms/navbar/navbar.styles.js

@@ -1,90 +0,0 @@
-import { css, unsafeCSS } from 'lit';
-import { breakpoint } from '@jsekulowicz/ds-tokens';
-const tabletBreakpoint = unsafeCSS(breakpoint.md);
-const belowDesktopBreakpoint = unsafeCSS(`calc(${breakpoint.lg} - 0.02px)`);
-export const navbarStyles = css `
-  :host {
-    display: block;
-    container-type: inline-size;
-  }
-  nav {
-    position: relative;
-    display: flex;
-    align-items: center;
-    gap: var(--ds-space-4);
-    padding: var(--ds-space-3) var(--ds-space-5);
-    background: var(--ds-color-bg);
-    border-bottom: 1px solid var(--ds-color-border);
-    font-family: var(--ds-font-body);
-  }
-  .brand {
-    display: flex;
-    align-items: center;
-    gap: var(--ds-space-2);
-    font-family: var(--ds-font-display);
-    font-size: var(--ds-font-size-lg);
-    color: var(--ds-color-fg);
-  }
-  .links {
-    display: flex;
-    align-items: center;
-    gap: var(--ds-space-3);
-    flex: 1;
-  }
-  .actions {
-    display: flex;
-    align-items: center;
-    gap: var(--ds-space-2);
-  }
-  .toggle {
-    display: none;
-    align-items: center;
-    justify-content: center;
-    border: 1px solid var(--ds-color-border);
-    background: transparent;
-    border-radius: var(--ds-radius-sm);
-    color: var(--ds-color-fg);
-    cursor: pointer;
-    padding: var(--ds-space-2);
-  }
-  .toggle:focus-visible {
-    box-shadow: var(--ds-shadow-focus);
-  }
-  .menu {
-    display: contents;
-  }
-  @container (max-width: ${tabletBreakpoint}) {
-    .links {
-      justify-content: flex-end;
-      flex: 0 0 auto;
-      margin-left: auto;
-    }
-    .toggle {
-      display: inline-flex;
-    }
-    .menu {
-      display: none;
-      position: absolute;
-      top: 100%;
-      left: 0;
-      right: 0;
-      flex-direction: column;
-      align-items: stretch;
-      gap: var(--ds-space-1);
-      padding: var(--ds-space-3);
-      background: var(--ds-color-bg);
-      border-bottom: 1px solid var(--ds-color-border);
-      box-shadow: var(--ds-shadow-md);
-      z-index: 10;
-    }
-    :host([data-open]) .menu {
-      display: flex;
-    }
-  }
-  @media (max-width: ${belowDesktopBreakpoint}) {
-    nav {
-      padding-inline: var(--ds-space-4);
-    }
-  }
-`;
-//# sourceMappingURL=navbar.styles.js.map

package/dist/organisms/navbar/navbar.styles.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"navbar.styles.js","sourceRoot":"","sources":["../../../src/organisms/navbar/navbar.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,KAAK,CAAC;AACrC,OAAO,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AAEpD,MAAM,gBAAgB,GAAG,SAAS,CAAC,UAAU,CAAC,EAAE,CAAC,CAAC;AAClD,MAAM,sBAAsB,GAAG,SAAS,CAAC,QAAQ,UAAU,CAAC,EAAE,YAAY,CAAC,CAAC;AAE5E,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2BAmDJ,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;uBA4BpB,sBAAsB;;;;;CAK5C,CAAC"}