@brad-frost-web/eddie-web-components 0.1.0

package/components/tooltip-trigger/tooltip-trigger.d.ts

@@ -0,0 +1,46 @@
+import { EdElement } from '@brad-frost-web/eddie-web-components/components/EdElement';
+/**
+ * @slot - The component content
+ */
+export declare class EdTooltipTrigger extends EdElement {
+    static get styles(): import('lit').CSSResult;
+    isActive?: boolean;
+    align?: 'right' | 'bottom' | 'left';
+    /**
+     * Initialize functions
+     */
+    constructor();
+    /**
+     * Connected Callback lifecycle
+     */
+    connectedCallback(): void;
+    /**
+     * Disconnected callback lifecycle
+     * 1) Remove window resize event listener
+     */
+    disconnectedCallback(): void;
+    /**
+     * Handle click outside the component
+     * 1) Close the show hide panel on click outside
+     * 2) If the nav is already closed then we don't care about outside clicks and we
+     * can bail early
+     * 3) By the time a user clicks on the page the shadowRoot will almost certainly be
+     * defined, but TypeScript isn't that trusting and sees this.shadowRoot as possibly
+     * undefined. To work around that we'll check that we have a shadowRoot (and a
+     * rendered .host) element here to appease the TypeScript compiler. This should never
+     * actually be shown or run for a human end user.
+     * 4) Check to see if we clicked inside the active navigation item
+     * 5) If the navigation is active and we've clicked outside of the nav then it should
+     * be closed.
+     */
+    handleOnClickOutside(event: MouseEvent): void;
+    handleKeyDown(e: KeyboardEvent): void;
+    handleClick(): void;
+    render(): import('lit-html').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ed-tooltip-trigger': EdTooltipTrigger;
+    }
+}
+//# sourceMappingURL=tooltip-trigger.d.ts.map

package/components/tooltip-trigger/tooltip-trigger.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip-trigger.d.ts","sourceRoot":"","sources":["../../../../packages/eddie-web-components/components/tooltip-trigger/tooltip-trigger.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,2DAA2D,CAAC;AAGtF,OAAO,kBAAkB,CAAC;AAC1B,OAAO,oBAAoB,CAAC;AAG5B;;GAEG;AACH,qBAAa,gBAAiB,SAAQ,SAAS;IAC7C,MAAM,KAAK,MAAM,4BAEhB;IAGD,QAAQ,CAAC,EAAE,OAAO,CAAC;IAGnB,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;IAEpC;;OAEG;;IAMH;;OAEG;IACH,iBAAiB;IAKjB;;;OAGG;IACH,oBAAoB;IAKpB;;;;;;;;;;;;;OAaG;IACH,oBAAoB,CAAC,KAAK,EAAE,UAAU;IAoBtC,aAAa,CAAC,CAAC,EAAE,aAAa;IAM9B,WAAW;IAcX,MAAM;CAyBP;AAMD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,oBAAoB,EAAE,gBAAgB,CAAC;KACxC;CACF"}

package/components/tooltip-trigger/tooltip-trigger.js

@@ -0,0 +1,100 @@
+import { E as a } from "../EdElement.js";
+import { unsafeCSS as c, html as h } from "lit";
+import { property as l } from "lit/decorators.js";
+import "../button/button.js";
+import "../tooltip/tooltip.js";
+const g = ":root,:host{--size-base-unit: .5rem}*,::slotted(*),*:before,*:after{box-sizing:border-box}h1,h2,h3,h4,h5,h6{margin:0}.ed-c-tooltip-trigger{display:inline-block;position:relative}ed-tooltip{display:none;position:absolute;bottom:135%;left:50%;transform:translate(-50%);margin-bottom:.375rem}ed-tooltip:focus-visible{outline:var(--ed-border-width-md) solid var(--ed-theme-color-border-strong);outline-offset:2px}.ed-c-tooltip-trigger--align-right ed-tooltip{bottom:auto;top:50%;left:135%;transform:translateY(-50%);margin-bottom:0;margin-left:.375rem}.ed-c-tooltip-trigger--align-bottom ed-tooltip{top:100%;bottom:inherit;margin-bottom:0;margin-top:.375rem}.ed-c-tooltip-trigger--align-left ed-tooltip{inset:50% 135% auto auto;transform:translateY(-50%);margin-bottom:0;margin-right:.375rem}.ed-c-tooltip-trigger.ed-is-active ed-tooltip{display:block}";
+var m = Object.defineProperty, d = (i, t, o, p) => {
+  for (var e = void 0, s = i.length - 1, r; s >= 0; s--)
+    (r = i[s]) && (e = r(t, o, e) || e);
+  return e && m(t, o, e), e;
+};
+class n extends a {
+  static get styles() {
+    return c(g.toString());
+  }
+  /**
+   * Initialize functions
+   */
+  constructor() {
+    super(), this.handleOnClickOutside = this.handleOnClickOutside.bind(this);
+  }
+  /**
+   * Connected Callback lifecycle
+   */
+  connectedCallback() {
+    super.connectedCallback(), document.addEventListener("mousedown", this.handleOnClickOutside, !1);
+  }
+  /**
+   * Disconnected callback lifecycle
+   * 1) Remove window resize event listener
+   */
+  disconnectedCallback() {
+    document.removeEventListener("mousedown", this.handleOnClickOutside, !1), super.disconnectedCallback();
+  }
+  /**
+   * Handle click outside the component
+   * 1) Close the show hide panel on click outside
+   * 2) If the nav is already closed then we don't care about outside clicks and we
+   * can bail early
+   * 3) By the time a user clicks on the page the shadowRoot will almost certainly be
+   * defined, but TypeScript isn't that trusting and sees this.shadowRoot as possibly
+   * undefined. To work around that we'll check that we have a shadowRoot (and a
+   * rendered .host) element here to appease the TypeScript compiler. This should never
+   * actually be shown or run for a human end user.
+   * 4) Check to see if we clicked inside the active navigation item
+   * 5) If the navigation is active and we've clicked outside of the nav then it should
+   * be closed.
+   */
+  handleOnClickOutside(t) {
+    if (!this.isActive)
+      return;
+    if (!this.shadowRoot?.host)
+      throw Error("Could not determine navigation context during click handler");
+    const o = t.composedPath().includes(this.shadowRoot.host);
+    this.isActive && !o && this.handleClick();
+  }
+  handleKeyDown(t) {
+    (t.code === "Escape" || t.code === "Tab") && this.handleClick();
+  }
+  handleClick() {
+    const t = this.shadowRoot.querySelector("ed-button").shadowRoot.querySelector(".ed-c-button");
+    this.isActive = !this.isActive, setTimeout(() => {
+      this.isActive === !1 ? (console.log(t), t.focus()) : this.shadowRoot.querySelector("ed-tooltip").focus();
+    }, 1);
+  }
+  render() {
+    const t = this.componentClassNames("ed-c-tooltip-trigger", {
+      "ed-c-tooltip-trigger--align-right": this.align === "right",
+      "ed-c-tooltip-trigger--align-bottom": this.align === "bottom",
+      "ed-c-tooltip-trigger--align-left": this.align === "left",
+      "ed-is-active": this.isActive === !0
+    });
+    return h`
+      <div class="${t}">
+        <ed-button
+          variant="bare"
+          iconPosition="after"
+          iconName="info"
+          size="lg"
+          ?hideText=${!0}
+          text="Button"
+          @click=${this.handleClick}
+        ></ed-button>
+        <ed-tooltip align=${this.align} tabindex=${this.isActive ? 0 : -1} @keydown=${this.handleKeyDown}>
+          <slot></slot>
+        </ed-tooltip>
+      </div>
+    `;
+  }
+}
+d([
+  l({ type: Boolean })
+], n.prototype, "isActive");
+d([
+  l()
+], n.prototype, "align");
+customElements.get("ed-tooltip-trigger") === void 0 && customElements.define("ed-tooltip-trigger", n);
+export {
+  n as EdTooltipTrigger
+};

package/components/utility-nav/utility-nav.d.ts

@@ -0,0 +1,14 @@
+import { EdElement } from '@brad-frost-web/eddie-web-components/components/EdElement';
+/**
+ * @slot - The utility nav items
+ */
+export declare class EdUtilityNav extends EdElement {
+    static get styles(): import('lit').CSSResult;
+    render(): import('lit-html').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ed-utility-nav': EdUtilityNav;
+    }
+}
+//# sourceMappingURL=utility-nav.d.ts.map

package/components/utility-nav/utility-nav.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utility-nav.d.ts","sourceRoot":"","sources":["../../../../packages/eddie-web-components/components/utility-nav/utility-nav.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,2DAA2D,CAAC;AAGtF;;GAEG;AACH,qBAAa,YAAa,SAAQ,SAAS;IACzC,MAAM,KAAK,MAAM,4BAEhB;IAED,MAAM;CAWP;AAMD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,YAAY,CAAC;KAChC;CACF"}

package/components/utility-nav/utility-nav.js

@@ -0,0 +1,22 @@
+import { unsafeCSS as e, html as s } from "lit";
+import { E as i } from "../EdElement.js";
+const l = ":root,:host{--size-base-unit: .5rem}*,::slotted(*),*:before,*:after{box-sizing:border-box}h1,h2,h3,h4,h5,h6{margin:0}:host{margin-left:auto}.ed-c-utility-nav__list{display:flex;margin:-1rem 0 0 -1rem;padding:0;list-style:none}.ed-c-utility-nav__list ::slotted(ed-utility-nav-item){margin-left:1rem;margin-top:1rem}";
+class n extends i {
+  static get styles() {
+    return e(l);
+  }
+  render() {
+    const t = this.componentClassNames("ed-c-utility-nav", {});
+    return s`
+      <nav class="${t}">
+        <ul class="ed-c-utility-nav__list">
+          <slot></slot>
+        </ul>
+      </nav>
+    `;
+  }
+}
+customElements.get("ed-utility-nav") === void 0 && customElements.define("ed-utility-nav", n);
+export {
+  n as EdUtilityNav
+};

package/components/utility-nav-item/utility-nav-item.d.ts

@@ -0,0 +1,38 @@
+import { EdElement } from '@brad-frost-web/eddie-web-components/components/EdElement';
+export declare class EdUtilityNavItem extends EdElement {
+    static get styles(): import('lit').CSSResult;
+    /**
+     * Hide text toggle
+     * 1) Visually hides the text so screenreaders can still read for accessibility when set to true.
+     */
+    hideText?: boolean;
+    /**
+     * URL of the utility nav item
+     */
+    href?: string;
+    /**
+     * Icon name
+     */
+    iconName?: string;
+    /**
+     * Icon position
+     * <ed-text-passage size="sm">
+     * <ul>
+     * <li>**before** places the icon before the text</li>
+     * <li>**after** places the icon after the text</li>
+     * </ul>
+     * </ed-text-passage>
+     */
+    iconPosition?: 'before' | 'after';
+    /**
+     * Text of the utility nav item
+     */
+    text?: string;
+    render(): import('lit-html').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ed-utility-nav-item': EdUtilityNavItem;
+    }
+}
+//# sourceMappingURL=utility-nav-item.d.ts.map

package/components/utility-nav-item/utility-nav-item.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utility-nav-item.d.ts","sourceRoot":"","sources":["../../../../packages/eddie-web-components/components/utility-nav-item/utility-nav-item.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,SAAS,EAAE,MAAM,2DAA2D,CAAC;AAGtF,qBAAa,gBAAiB,SAAQ,SAAS;IAC7C,MAAM,KAAK,MAAM,4BAEhB;IAED;;;OAGG;IAEH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IAEH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IAEH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;;;;;;;OAQG;IAEH,YAAY,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAa;IAE9C;;OAEG;IAEH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd,MAAM;CAiCP;AAMD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,qBAAqB,EAAE,gBAAgB,CAAC;KACzC;CACF"}

package/components/utility-nav-item/utility-nav-item.js

@@ -0,0 +1,57 @@
+import { unsafeCSS as h, html as e } from "lit";
+import { ifDefined as d } from "lit-html/directives/if-defined.js";
+import { property as a } from "lit/decorators.js";
+import { E as c } from "../EdElement.js";
+const p = '@charset "UTF-8";:root,:host{--size-base-unit: .5rem}*,::slotted(*),*:before,*:after{box-sizing:border-box}h1,h2,h3,h4,h5,h6{margin:0}.ed-u-is-hidden{display:none!important;visibility:hidden!important}.ed-u-is-vishidden{position:absolute!important;overflow:hidden;width:1px;height:1px;padding:0;border:0;clip:rect(1px,1px,1px,1px)}@media all and (min-width:23.4375rem){.ed-u-hide-sm{display:none!important}}@media all and (min-width:48rem){.ed-u-hide-md{display:none!important}}@media all and (min-width:60rem){.ed-u-hide-lg{display:none!important}}@media all and (min-width:75rem){.ed-u-hide-xl{display:none!important}}@media all and (max-width:23.4375rem){.ed-u-show-sm{display:none!important}}@media all and (max-width:48rem){.ed-u-show-md{display:none!important}}@media all and (max-width:60rem){.ed-u-show-lg{display:none!important}}@media all and (max-width:75rem){.ed-u-show-xl{display:none!important}}.ed-c-utility-nav__item{margin:0;padding:0}.ed-c-utility-nav__link{display:flex;font-family:var(--ed-theme-typography-body-default-font-family);font-weight:var(--ed-theme-typography-body-default-font-weight);font-size:var(--ed-theme-typography-body-default-font-size);line-height:var(--ed-theme-typography-body-default-line-height);letter-spacing:var(--ed-theme-typography-body-default-letter-spacing);text-transform:var(--ed-theme-typography-body-default-text-transform);border:none;background:none;appearance:none;padding:0;text-align:left;color:var(--ed-theme-color-content-brand);cursor:pointer;transition:color var(--ed-theme-animation-fade-quick) var(--ed-theme-animation-ease)}.ed-c-utility-nav__link:hover,.ed-c-utility-nav__link:focus{color:var(--ed-theme-color-content-brand-hover)}ed-icon{--ed-icon-height: 1rem;--ed-icon-width: 1rem}.ed-c-utility-nav__text+ed-icon{margin-left:.5rem}ed-icon+.ed-c-utility-nav__text{margin-left:.5rem}';
+var y = Object.defineProperty, o = (r, n, l, u) => {
+  for (var t = void 0, s = r.length - 1, m; s >= 0; s--)
+    (m = r[s]) && (t = m(n, l, t) || t);
+  return t && y(n, l, t), t;
+};
+class i extends c {
+  constructor() {
+    super(...arguments), this.iconPosition = void 0;
+  }
+  static get styles() {
+    return h(p);
+  }
+  render() {
+    const n = this.componentClassNames("ed-c-utility-nav__item", {});
+    return this.href ? e`
+        <li class="${n}">
+          <a href="${this.href}" class="ed-c-utility-nav__link">
+            ${this.iconPosition === "before" ? e`<ed-icon styleModifier="ed-c-utility-nav__icon" aria-hidden="true" name="${d(this.iconName)}"></ed-icon>` : e``}
+            <span class="${this.hideText ? "ed-u-is-vishidden ed-c-utility-nav__text" : "ed-c-utility-nav__text"}">${this.text}</span>
+            ${this.iconPosition === "after" ? e`<ed-icon styleModifier="ed-c-utility-nav__icon" aria-hidden="true" name="${d(this.iconName)}"></ed-icon>` : e``}
+          </a>
+        </li>
+      ` : e`
+        <li class="${n}">
+          <button class="ed-c-utility-nav__link">
+            ${this.iconPosition === "before" ? e`<ed-icon styleModifier="ed-c-utility-nav__icon" aria-hidden="true" name="${d(this.iconName)}"></ed-icon>` : e``}
+            <span class="${this.hideText ? "ed-u-is-vishidden ed-c-utility-nav__text" : "ed-c-utility-nav__text"}">${this.text}</span>
+            ${this.iconPosition === "after" ? e`<ed-icon styleModifier="ed-c-utility-nav__icon" aria-hidden="true" name="${d(this.iconName)}"></ed-icon>` : e``}
+          </button>
+        </li>
+      `;
+  }
+}
+o([
+  a({ type: Boolean })
+], i.prototype, "hideText");
+o([
+  a()
+], i.prototype, "href");
+o([
+  a()
+], i.prototype, "iconName");
+o([
+  a()
+], i.prototype, "iconPosition");
+o([
+  a()
+], i.prototype, "text");
+customElements.get("ed-utility-nav-item") === void 0 && customElements.define("ed-utility-nav-item", i);
+export {
+  i as EdUtilityNavItem
+};

package/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "@brad-frost-web/eddie-web-components",
+  "version": "0.1.0",
+  "type": "module",
+  "scripts": {
+    "start": "npm run build:custom-elements.json && npm run storybook",
+    "build": "vite build",
+    "preview": "vite preview",
+    "build:custom-elements.json": "wca analyze \"components/*/*.ts\" --outFile custom-elements.json",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "plop": "plop component",
+    "plop:page": "plop page",
+    "plop:recipe": "plop recipe"
+  },
+  "dependencies": {
+    "classnames": "^2.5.1",
+    "lit": "^3.3.1",
+    "sass": "^1.93.2"
+  },
+  "devDependencies": {
+    "@chromatic-com/storybook": "^4.1.1",
+    "@storybook/addon-a11y": "^9.1.10",
+    "@storybook/addon-links": "^9.1.10",
+    "@storybook/addon-docs": "^9.1.10",
+    "@storybook/addon-themes": "^9.1.10",
+    "@storybook/addon-vitest": "^9.1.10",
+    "@storybook/web-components-vite": "^9.1.10",
+    "@vitest/browser": "^3.2.4",
+    "@vitest/coverage-v8": "^3.2.4",
+    "copyfiles": "^2.4.1",
+    "del-cli": "^7.0.0",
+    "eslint-plugin-storybook": "^9.1.10",
+    "json-loader": "^0.5.7",
+    "markdown-it": "^14.1.0",
+    "plop": "^4.0.4",
+    "prismjs": "^1.30.0",
+    "playwright": "^1.56.0",
+    "storybook": "^9.1.10",
+    "typescript": "~5.9.3",
+    "vite": "^7.1.7",
+    "vite-plugin-css-injected-by-js": "^3.5.2",
+    "vite-plugin-dts": "^4.5.4",
+    "vite-plugin-dynamic-import": "^1.6.0",
+    "vite-plugin-static-copy": "^3.1.3",
+    "vitest": "^3.2.4",
+    "web-component-analyzer": "^2.0.0"
+  }
+}