@sebgroup/green-core 1.15.1 → 1.17.0

package/chunks/chunk.2Y3BHFKO.js

@@ -0,0 +1,154 @@
+import {
+  GdsElement
+} from "./chunk.2LQSDOD4.js";
+import {
+  gdsCustomElement,
+  html
+} from "./chunk.VOYMQ322.js";
+import {
+  __decorateClass
+} from "./chunk.5VURDMKE.js";
+
+// libs/core/src/components/icon/icon.ts
+import { unsafeCSS } from "lit";
+
+// libs/core/src/components/icon/stem.styles.scss
+var stem_styles_default = `svg:not([display=none]) {
+  contain: layout style;
+  display: flex;
+  height: 1lh;
+  isolation: isolate;
+  overflow: hidden;
+  width: auto;
+}
+
+symbol {
+  fill: none;
+  height: 24px;
+  stroke: currentColor;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  stroke-width: 2px;
+  width: 24px;
+}`;
+
+// libs/core/src/components/icon/icon.ts
+var GdsIcon = class extends GdsElement {
+  constructor() {
+    super(...arguments);
+    this.open = false;
+    this.name = "";
+  }
+  static get styles() {
+    return unsafeCSS(stem_styles_default);
+  }
+  render() {
+    const { name } = this;
+    return html`
+      <svg display="none">
+        <symbol id="plus">
+          <line x1="12" y1="5" x2="12" y2="19" />
+          <line x1="5" y1="12" x2="19" y2="12" />
+        </symbol>
+        <symbol id="x">
+          <line x1="18" y1="6" x2="6" y2="18" />
+          <line x1="6" y1="6" x2="18" y2="18" />
+        </symbol>
+        <symbol id="chevron-right">
+          <polyline points="9 18 15 12 9 6" />
+        </symbol>
+        <symbol id="chevron-left">
+          <polyline points="15 18 9 12 15 6" />
+        </symbol>
+        <symbol id="chevron-down">
+          <polyline points="6 9 12 15 18 9" />
+        </symbol>
+        <symbol id="arrow">
+          <line x1="5" y1="12" x2="19" y2="12" />
+          <polyline points="12 5 19 12 12 19" />
+        </symbol>
+        <symbol id="bell">
+          <path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9" />
+          <path d="M13.73 21a2 2 0 0 1-3.46 0" />
+        </symbol>
+        <symbol id="calendar">
+          <rect x="3" y="4" width="18" height="18" rx="2" ry="2" />
+          <line x1="16" y1="2" x2="16" y2="6" />
+          <line x1="8" y1="2" x2="8" y2="6" />
+          <line x1="3" y1="10" x2="21" y2="10" />
+        </symbol>
+        <symbol id="lock">
+          <rect x="3" y="11" width="18" height="11" rx="2" ry="2" />
+          <path d="M7 11V7a5 5 0 0 1 10 0v4" />
+        </symbol>
+        <symbol id="eye">
+          <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" />
+          <circle cx="12" cy="12" r="3" />
+        </symbol>
+        <symbol id="hash">
+          <line x1="4" y1="9" x2="20" y2="9" />
+          <line x1="4" y1="15" x2="20" y2="15" />
+          <line x1="10" y1="3" x2="8" y2="21" />
+          <line x1="16" y1="3" x2="14" y2="21" />
+        </symbol>
+        <symbol id="mail">
+          <path
+            d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"
+          />
+          <polyline points="22,6 12,13 2,6" />
+        </symbol>
+        <symbol id="send">
+          <line x1="22" y1="2" x2="11" y2="13" />
+          <polygon points="22 2 15 22 11 13 2 9 22 2" />
+        </symbol>
+        <symbol id="info">
+          <circle cx="12" cy="12" r="10" />
+          <line x1="12" y1="16" x2="12" y2="12" />
+          <line x1="12" y1="8" x2="12.01" y2="8" />
+        </symbol>
+        <symbol id="tel">
+          <path
+            d="M15.05 5A5 5 0 0 1 19 8.95M15.05 1A9 9 0 0 1 23 8.94m-1 7.98v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"
+          />
+        </symbol>
+        <symbol id="search">
+          <circle cx="11" cy="11" r="8" />
+          <line x1="21" y1="21" x2="16.65" y2="16.65" />
+        </symbol>
+        <symbol id="user">
+          <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" />
+          <circle cx="12" cy="7" r="4" />
+        </symbol>
+        <symbol id="arrow-up">
+          <line x1="12" y1="19" x2="12" y2="5" />
+          <polyline points="5 12 12 5 19 12" />
+        </symbol>
+        <symbol id="arrow-down">
+          <line x1="12" y1="5" x2="12" y2="19" />
+          <polyline points="19 12 12 19 5 12" />
+        </symbol>
+        <symbol id="warning">
+          <path
+            d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"
+          />
+          <line x1="12" y1="9" x2="12" y2="13" />
+          <path x1="12" y1="17" x2="12.01" y2="17" />
+        </symbol>
+      </svg>
+      <svg viewBox="0 0 24 24">
+        <use href="#${name}"></use>
+      </svg>
+    `;
+  }
+};
+GdsIcon.properties = {
+  open: { type: String, reflect: true },
+  name: { type: String }
+};
+GdsIcon = __decorateClass([
+  gdsCustomElement("gds-icon")
+], GdsIcon);
+
+export {
+  GdsIcon
+};

package/chunks/chunk.375BWME4.js

@@ -0,0 +1,29 @@
+// libs/core/src/primitives/calendar/functions.ts
+import {
+  startOfMonth,
+  endOfMonth,
+  addDays,
+  eachWeekOfInterval,
+  eachDayOfInterval
+} from "date-fns";
+import { html } from "lit-html";
+function renderMonthGridView(date, template) {
+  const monthStart = startOfMonth(date);
+  const monthEnd = endOfMonth(date);
+  const weeks = eachWeekOfInterval(
+    { start: monthStart, end: monthEnd },
+    { weekStartsOn: 1 }
+  );
+  return html`${template(
+    weeks.map((weekStartDay) => ({
+      days: eachDayOfInterval({
+        start: weekStartDay,
+        end: addDays(weekStartDay, 6)
+      })
+    }))
+  )}`;
+}
+
+export {
+  renderMonthGridView
+};

package/chunks/chunk.5VURDMKE.js

@@ -0,0 +1,75 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result)
+    __defProp(target, key, result);
+  return result;
+};
+var __accessCheck = (obj, member, msg) => {
+  if (!member.has(obj))
+    throw TypeError("Cannot " + msg);
+};
+var __privateGet = (obj, member, getter) => {
+  __accessCheck(obj, member, "read from private field");
+  return getter ? getter.call(obj) : member.get(obj);
+};
+var __privateAdd = (obj, member, value) => {
+  if (member.has(obj))
+    throw TypeError("Cannot add the same private member more than once");
+  member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+};
+var __privateSet = (obj, member, value, setter) => {
+  __accessCheck(obj, member, "write to private field");
+  setter ? setter.call(obj, value) : member.set(obj, value);
+  return value;
+};
+var __privateWrapper = (obj, member, setter, getter) => ({
+  set _(value) {
+    __privateSet(obj, member, value, setter);
+  },
+  get _() {
+    return __privateGet(obj, member, getter);
+  }
+});
+var __privateMethod = (obj, member, method) => {
+  __accessCheck(obj, member, "access private method");
+  return method;
+};
+
+export {
+  __spreadValues,
+  __spreadProps,
+  __export,
+  __decorateClass,
+  __privateGet,
+  __privateAdd,
+  __privateSet,
+  __privateWrapper,
+  __privateMethod
+};

package/chunks/chunk.63RKNI5K.js

@@ -0,0 +1,244 @@
+import {
+  grid_style_css_default
+} from "./chunk.XMPBXAGB.js";
+import {
+  tokens
+} from "./chunk.EUQ5DOQM.js";
+import {
+  watch
+} from "./chunk.2WO4NHJ2.js";
+import {
+  gdsCustomElement,
+  html
+} from "./chunk.VOYMQ322.js";
+import {
+  __decorateClass,
+  __spreadProps,
+  __spreadValues
+} from "./chunk.5VURDMKE.js";
+
+// libs/core/src/components/grid/grid.ts
+import { css, LitElement, unsafeCSS } from "lit";
+import { property, state } from "lit/decorators.js";
+var BreakpointPattern = new RegExp("(?<l>l:([a-z0-9]+))?\\s*(?<m>m:([a-z0-9]+))?\\s*(?<s>s:([a-z0-9]+))?");
+var GdsGrid = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this._gridVariables = {
+      varsColumn: css``,
+      varsGap: css``,
+      varsRowGap: css``,
+      varsPadding: css``,
+      varsAutoColumns: css``
+    };
+  }
+  /**
+   * Lifecycle method called when the element is connected to the DOM.
+   * It updates the column, gap, and padding variables.
+   */
+  connectedCallback() {
+    super.connectedCallback();
+    this._updateColumnVariables();
+    this._updateGapVariables();
+    this._updateRowGapVariables();
+    this._updatePaddingVariables();
+    this._updateAutoColumnsVariables();
+  }
+  _updateColumnVariables() {
+    var _a;
+    const match = (_a = this.columns) == null ? void 0 : _a.match(BreakpointPattern);
+    let columnsDesktop, columnsTablet, columnsMobile;
+    if (this.columns && !isNaN(Number(this.columns))) {
+      columnsDesktop = columnsTablet = columnsMobile = Number(this.columns);
+    } else {
+      const { l, m, s } = (match == null ? void 0 : match.groups) || {};
+      columnsDesktop = l ? Number(l.split(":")[1]) : void 0;
+      columnsTablet = m ? Number(m.split(":")[1]) : void 0;
+      columnsMobile = s ? Number(s.split(":")[1]) : void 0;
+    }
+    const columnProperties = [
+      { name: "_columns-desktop", value: columnsDesktop },
+      { name: "_columns-tablet", value: columnsTablet },
+      { name: "_columns-mobile", value: columnsMobile }
+    ];
+    const cssVariables = columnProperties.filter(({ value }) => value !== void 0).map(({ name, value }) => `--${name}: ${value};`).join(" ");
+    this._gridVariables = __spreadProps(__spreadValues({}, this._gridVariables), {
+      varsColumn: css`
+        ${unsafeCSS(cssVariables)}
+      `
+    });
+    this.requestUpdate("_gridVariables");
+  }
+  _updateGapVariables() {
+    var _a;
+    const match = (_a = this.gap) == null ? void 0 : _a.match(BreakpointPattern);
+    let gapDesktop, gapTablet, gapMobile;
+    if (this.gap && !this.gap.includes(" ")) {
+      gapDesktop = gapTablet = gapMobile = `var(--gds-sys-grid-gap-${this.gap})`;
+    } else {
+      const { l, m, s } = (match == null ? void 0 : match.groups) || {};
+      gapDesktop = l ? `var(--gds-sys-grid-gap-${l.split(":")[1]})` : void 0;
+      gapTablet = m ? `var(--gds-sys-grid-gap-${m.split(":")[1]})` : void 0;
+      gapMobile = s ? `var(--gds-sys-grid-gap-${s.split(":")[1]})` : void 0;
+    }
+    const gapProperties = [
+      { name: "_gap-desktop", value: gapDesktop },
+      { name: "_gap-tablet", value: gapTablet },
+      { name: "_gap-mobile", value: gapMobile }
+    ];
+    const cssVariables = gapProperties.filter(({ value }) => value !== void 0).map(({ name, value }) => `--${name}: ${value};`).join(" ");
+    this._gridVariables = __spreadProps(__spreadValues({}, this._gridVariables), {
+      varsGap: css`
+        ${unsafeCSS(cssVariables)}
+      `
+    });
+    this.requestUpdate("_gridVariables");
+  }
+  _updateRowGapVariables() {
+    var _a;
+    const match = (_a = this.rowGap) == null ? void 0 : _a.match(BreakpointPattern);
+    let rowGapDesktop, rowGapTablet, rowGapMobile;
+    if (this.rowGap && !this.rowGap.includes(" ")) {
+      rowGapDesktop = rowGapTablet = rowGapMobile = `var(--gds-sys-grid-gap-${this.rowGap})`;
+    } else {
+      const { l, m, s } = (match == null ? void 0 : match.groups) || {};
+      rowGapDesktop = l ? `var(--gds-sys-grid-gap-${l.split(":")[1]})` : void 0;
+      rowGapTablet = m ? `var(--gds-sys-grid-gap-${m.split(":")[1]})` : void 0;
+      rowGapMobile = s ? `var(--gds-sys-grid-gap-${s.split(":")[1]})` : void 0;
+    }
+    const gapProperties = [
+      { name: "_row-gap-desktop", value: rowGapDesktop },
+      { name: "_row-gap-tablet", value: rowGapTablet },
+      { name: "_row-gap-mobile", value: rowGapMobile }
+    ];
+    const cssVariables = gapProperties.filter(({ value }) => value !== void 0).map(({ name, value }) => `--${name}: ${value};`).join(" ");
+    this._gridVariables = __spreadProps(__spreadValues({}, this._gridVariables), {
+      varsRowGap: css`
+        ${unsafeCSS(cssVariables)}
+      `
+    });
+    this.requestUpdate("_gridVariables");
+  }
+  _updatePaddingVariables() {
+    var _a;
+    const match = (_a = this.padding) == null ? void 0 : _a.match(BreakpointPattern);
+    let paddingDesktop, paddingTablet, paddingMobile;
+    if (this.padding && !this.padding.includes(" ")) {
+      paddingDesktop = paddingTablet = paddingMobile = `var(--gds-sys-grid-gap-${this.gap})`;
+    } else {
+      const { l, m, s } = (match == null ? void 0 : match.groups) || {};
+      paddingDesktop = l ? `var(--gds-sys-grid-gap-${l.split(":")[1]})` : void 0;
+      paddingTablet = m ? `var(--gds-sys-grid-gap-${m.split(":")[1]})` : void 0;
+      paddingMobile = s ? `var(--gds-sys-grid-gap-${s.split(":")[1]})` : void 0;
+    }
+    const paddingProperties = [
+      { name: "_padding-desktop", value: paddingDesktop },
+      { name: "_padding-tablet", value: paddingTablet },
+      { name: "_padding-mobile", value: paddingMobile }
+    ];
+    const cssVariables = paddingProperties.filter(({ value }) => value !== void 0).map(({ name, value }) => `--${name}: ${value};`).join(" ");
+    this._gridVariables = __spreadProps(__spreadValues({}, this._gridVariables), {
+      varsPadding: css`
+        ${unsafeCSS(cssVariables)}
+      `
+    });
+    this.requestUpdate("_gridVariables");
+  }
+  _updateAutoColumnsVariables() {
+    var _a;
+    const match = (_a = this.autoColumns) == null ? void 0 : _a.match(BreakpointPattern);
+    let widthDesktop, widthTablet, widthMobile;
+    if (this.autoColumns && !this.autoColumns.includes(" ")) {
+      widthDesktop = widthTablet = widthMobile = `${this.autoColumns}px`;
+    } else {
+      const { l, m, s } = (match == null ? void 0 : match.groups) || {};
+      widthDesktop = l ? `${l.split(":")[1]}px` : void 0;
+      widthTablet = m ? `${m.split(":")[1]}px` : void 0;
+      widthMobile = s ? `${s.split(":")[1]}px` : void 0;
+    }
+    const widthProperties = [
+      { name: "_col-width-mobile", value: widthMobile },
+      { name: "_col-width-tablet", value: widthTablet },
+      { name: "_col-width-desktop", value: widthDesktop }
+    ];
+    const cssVariables = widthProperties.filter(({ value }) => value !== void 0).map(({ name, value }) => `--${name}: ${value};`).join(" ");
+    this._gridVariables = __spreadProps(__spreadValues({}, this._gridVariables), {
+      varsAutoColumns: css`
+        ${unsafeCSS(cssVariables)}
+      `
+    });
+    this.requestUpdate("_gridVariables");
+  }
+  _updateGridCss() {
+    const sheet = new CSSStyleSheet();
+    sheet.replaceSync(`:host {${Object.values(this._gridVariables).join("")}} `);
+    if (this.shadowRoot) {
+      const styles = Array.isArray(GdsGrid.styles) ? GdsGrid.styles : [GdsGrid.styles];
+      const styleSheets = styles.flatMap((style) => {
+        if (Array.isArray(style)) {
+          return style.map((s) => {
+            const newSheet = new CSSStyleSheet();
+            newSheet.replaceSync(s.cssText);
+            return newSheet;
+          });
+        } else {
+          const newSheet = new CSSStyleSheet();
+          newSheet.replaceSync(style.cssText);
+          return [newSheet];
+        }
+      });
+      this.shadowRoot.adoptedStyleSheets = [sheet, ...styleSheets];
+    }
+  }
+  render() {
+    return html` <slot></slot> `;
+  }
+};
+GdsGrid.styles = [tokens, grid_style_css_default];
+GdsGrid.shadowRootOptions = {
+  mode: "open",
+  delegatesFocus: true
+};
+__decorateClass([
+  property({ attribute: "columns", type: String })
+], GdsGrid.prototype, "columns", 2);
+__decorateClass([
+  property({ attribute: "gap", type: String })
+], GdsGrid.prototype, "gap", 2);
+__decorateClass([
+  property({ attribute: "row-gap", type: String })
+], GdsGrid.prototype, "rowGap", 2);
+__decorateClass([
+  property({ attribute: "padding", type: String })
+], GdsGrid.prototype, "padding", 2);
+__decorateClass([
+  property({ attribute: "auto-columns", type: String })
+], GdsGrid.prototype, "autoColumns", 2);
+__decorateClass([
+  state()
+], GdsGrid.prototype, "_gridVariables", 2);
+__decorateClass([
+  watch("columns")
+], GdsGrid.prototype, "_updateColumnVariables", 1);
+__decorateClass([
+  watch("gap")
+], GdsGrid.prototype, "_updateGapVariables", 1);
+__decorateClass([
+  watch("row-gap")
+], GdsGrid.prototype, "_updateRowGapVariables", 1);
+__decorateClass([
+  watch("padding")
+], GdsGrid.prototype, "_updatePaddingVariables", 1);
+__decorateClass([
+  watch("autoColumns")
+], GdsGrid.prototype, "_updateAutoColumnsVariables", 1);
+__decorateClass([
+  watch("_gridVariables")
+], GdsGrid.prototype, "_updateGridCss", 1);
+GdsGrid = __decorateClass([
+  gdsCustomElement("gds-grid")
+], GdsGrid);
+
+export {
+  GdsGrid
+};

package/chunks/chunk.6NM7ENKA.js

@@ -0,0 +1,31 @@
+// libs/core/src/utils/helpers/constrain-slots.ts
+function constrainSlots(self) {
+  self.updateComplete.then(() => {
+    var _a, _b, _c;
+    const slots = (_a = self.shadowRoot) == null ? void 0 : _a.querySelectorAll("slot[gds-allow]");
+    if (!slots)
+      return;
+    for (const node of Array.from(self.childNodes)) {
+      if (node.nodeType === Node.TEXT_NODE && ((_b = node.textContent) == null ? void 0 : _b.trim()) === "") {
+        (_c = node.parentNode) == null ? void 0 : _c.removeChild(node);
+      }
+    }
+    const constrain = (slot) => {
+      var _a2, _b2;
+      const allowed = ((_a2 = slot.getAttribute("gds-allow")) == null ? void 0 : _a2.split(" ")) || [];
+      for (const node of Array.from(slot.assignedNodes())) {
+        if (!allowed.includes(node.nodeName.toLowerCase())) {
+          (_b2 = node.parentNode) == null ? void 0 : _b2.removeChild(node);
+        }
+      }
+    };
+    slots.forEach((slot) => {
+      constrain(slot);
+      slot.addEventListener("slotchange", () => constrain(slot));
+    });
+  });
+}
+
+export {
+  constrainSlots
+};

package/chunks/chunk.6UA66KQU.js

@@ -0,0 +1,153 @@
+import {
+  TransitionalStyles
+} from "./chunk.QONSFT2N.js";
+import {
+  GdsElement
+} from "./chunk.2LQSDOD4.js";
+import {
+  constrainSlots
+} from "./chunk.6NM7ENKA.js";
+import {
+  gdsCustomElement,
+  html
+} from "./chunk.VOYMQ322.js";
+import {
+  __decorateClass,
+  __privateAdd,
+  __privateMethod
+} from "./chunk.5VURDMKE.js";
+
+// libs/core/src/components/context-menu/context-menu.ts
+import { nothing } from "lit";
+import { msg } from "@lit/localize";
+import { classMap } from "lit-html/directives/class-map.js";
+import { property, queryAsync, state } from "lit/decorators.js";
+
+// libs/core/src/components/context-menu/context-menu.styles.ts
+import { css } from "lit";
+var style = css`
+  @layer base, reset, transitional-styles;
+  @layer base {
+    button {
+      display: flex;
+      border-width: 0;
+      background-color: #ededed;
+      border-radius: calc(1px * infinity);
+      padding: 0.4rem 0.8rem;
+      font-family: inherit;
+      cursor: pointer;
+      align-items: center;
+      gap: 0.5rem;
+    }
+
+    button:hover {
+      background-color: #dcdcdc;
+    }
+  }
+`;
+var context_menu_styles_default = style;
+
+// libs/core/src/components/context-menu/context-menu.ts
+var _handleItemClick, handleItemClick_fn;
+var GdsContextMenu = class extends GdsElement {
+  constructor() {
+    super();
+    __privateAdd(this, _handleItemClick);
+    this.open = false;
+    this.buttonLabel = msg("Open context menu");
+    this.showLabel = false;
+    this.label = "";
+    this.placement = "bottom-start";
+    constrainSlots(this);
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    TransitionalStyles.instance.apply(this, "gds-context-menu");
+    this.addEventListener("keydown", (e) => {
+      if (this.open && e.key == "Tab") {
+        e.preventDefault();
+        this.open = false;
+        this.elTriggerBtn.then((el) => el.focus());
+      }
+    });
+  }
+  render() {
+    var _a, _b, _c;
+    return html`${this._tStyles}
+      <button
+        id="trigger"
+        class="icon border-0 small ${classMap({ highlighted: this.open })}"
+        aria-label=${(_a = this.buttonLabel) != null ? _a : this.label}
+        aria-haspopup="menu"
+        aria-controls="menu"
+        aria-expanded=${this.open}
+        @click=${() => this.open = !this.open}
+      >
+        <slot name="trigger">
+          ${this.showLabel ? (_b = this.buttonLabel) != null ? _b : this.label : nothing}
+          <svg width="24" height="24" viewBox="0 0 24 24">
+            <path
+              d="M14 12C14 13.1042 13.1042 14 12 14C10.8958 14 10 13.1042 10 12C10 10.8958 10.8958 10 12 10C13.1042 10 14 10.8958 14 12ZM19 10C17.8958 10 17 10.8958 17 12C17 13.1042 17.8958 14 19 14C20.1042 14 21 13.1042 21 12C21 10.8958 20.1042 10 19 10ZM5 10C3.89583 10 3 10.8958 3 12C3 13.1042 3.89583 14 5 14C6.10417 14 7 13.1042 7 12C7 10.8958 6.10417 10 5 10Z"
+              fill="#353531"
+            />
+          </svg>
+        </slot>
+      </button>
+      <gds-popover
+        id="menu"
+        .open=${this.open}
+        .triggerRef=${this.elTriggerBtn}
+        .label=${this.label}
+        .placement=${this.placement}
+        @gds-ui-state=${(e) => this.open = e.detail.open}
+      >
+        <gds-menu
+          aria-label=${(_c = this.label) != null ? _c : this.buttonLabel}
+          @gds-menu-item-click=${__privateMethod(this, _handleItemClick, handleItemClick_fn)}
+        >
+          <slot allow="gds-menu-item gds-menu-heading"></slot>
+        </gds-menu>
+      </gds-popover>`;
+  }
+};
+_handleItemClick = new WeakSet();
+handleItemClick_fn = function() {
+  this.open = false;
+};
+GdsContextMenu.styles = [context_menu_styles_default];
+GdsContextMenu.shadowRootOptions = {
+  mode: "open",
+  delegatesFocus: true
+};
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], GdsContextMenu.prototype, "open", 2);
+__decorateClass([
+  property({
+    attribute: "button-label"
+  })
+], GdsContextMenu.prototype, "buttonLabel", 2);
+__decorateClass([
+  property({
+    attribute: "show-label"
+  })
+], GdsContextMenu.prototype, "showLabel", 2);
+__decorateClass([
+  property()
+], GdsContextMenu.prototype, "label", 2);
+__decorateClass([
+  property()
+], GdsContextMenu.prototype, "placement", 2);
+__decorateClass([
+  state()
+], GdsContextMenu.prototype, "_tStyles", 2);
+__decorateClass([
+  queryAsync("#trigger")
+], GdsContextMenu.prototype, "elTriggerBtn", 2);
+GdsContextMenu = __decorateClass([
+  gdsCustomElement("gds-context-menu")
+], GdsContextMenu);
+
+export {
+  GdsContextMenu
+};