@sebgroup/green-core 1.15.1 → 1.17.0

package/chunks/chunk.AQGTMWG4.js

@@ -0,0 +1,101 @@
+import {
+  tokens
+} from "./chunk.EUQ5DOQM.js";
+import {
+  gdsCustomElement
+} from "./chunk.VOYMQ322.js";
+import {
+  __decorateClass
+} from "./chunk.5VURDMKE.js";
+
+// libs/core/src/primitives/ripple/ripple.ts
+import { LitElement, html, unsafeCSS } from "lit";
+import { query } from "lit/decorators.js";
+
+// libs/core/src/primitives/ripple/ripple.styles.scss
+var ripple_styles_default = `:host {
+  --gds-ripple-motion-name: ripple;
+  --gds-ripple-motion: var(--gds-ripple-motion-name)
+    var(--gds-sys-motion-duration) var(--gds-sys-motion-timing-function)
+    var(--gds-sys-motion-delay) var(--gds-sys-motion-iteration-count)
+    var(--gds-sys-motion-direction) var(--gds-sys-motion-fill-mode)
+    var(--gds-sys-motion-play-state);
+  border-radius: var(--gds-sys-radii-full);
+  contain: strict;
+  display: flex;
+  height: 100%;
+  inset: 0;
+  overflow: hidden;
+  position: absolute;
+  width: 100%;
+}
+
+div {
+  background-color: currentColor;
+  border-radius: var(--gds-sys-radii-full);
+  display: flex;
+  height: 20px;
+  left: var(--gds-ripple-left, 50%);
+  margin-left: -10px;
+  margin-top: -10px;
+  opacity: 0;
+  pointer-events: none;
+  position: absolute;
+  top: var(--gds-ripple-top, 50%);
+  width: 20px;
+  will-change: transform;
+}
+
+div.gds-ripple-effect {
+  animation: var(--gds-ripple-motion);
+}
+
+@keyframes ripple {
+  from {
+    opacity: 0.5;
+    transform: scale(0);
+  }
+  to {
+    opacity: 0;
+    transform: scale(calc(3 * var(--mt-ripple-spread, 4)));
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  :host {
+    --gds-ripple-motion-name: none !important;
+  }
+}`;
+
+// libs/core/src/primitives/ripple/ripple.ts
+var Ripple = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.onmousedown = (e) => {
+      const target = e.target;
+      const rect = target.getBoundingClientRect();
+      const rippleEl = this._rippleEl;
+      if (rippleEl) {
+        rippleEl.classList.remove("gds-ripple-effect");
+        this.style.setProperty("--gds-ripple-top", `${e.clientY - rect.top}px`);
+        this.style.setProperty("--gds-ripple-left", `${e.clientX - rect.left}px`);
+        setTimeout(() => {
+          rippleEl.classList.add("gds-ripple-effect");
+        }, 20);
+      }
+    };
+  }
+  render() {
+    return html`<div></div>`;
+  }
+};
+Ripple.styles = [tokens, unsafeCSS(ripple_styles_default)];
+__decorateClass([
+  query("div")
+], Ripple.prototype, "_rippleEl", 2);
+Ripple = __decorateClass([
+  gdsCustomElement("gds-ripple")
+], Ripple);
+
+export {
+  Ripple
+};

package/chunks/chunk.D7H7CUS4.js

@@ -0,0 +1,55 @@
+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
+} from "./chunk.5VURDMKE.js";
+
+// libs/core/src/components/grouped-list/grouped-list.ts
+import { state, property } from "lit/decorators.js";
+import { when } from "lit/directives/when.js";
+var GdsGroupedList = class extends GdsElement {
+  constructor() {
+    super(...arguments);
+    this.label = "";
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    constrainSlots(this);
+    TransitionalStyles.instance.apply(this, "gds-grouped-list");
+  }
+  render() {
+    return html`${this._tStyles}${when(
+      this.label,
+      () => html`<div class="gds-list-heading" aria-hidden="true" id="label">
+            ${this.label}
+          </div>`
+    )}
+      <div role="list" aria-labelledby="label">
+        <slot gds-allow="gds-list-item"></slot>
+      </div>`;
+  }
+};
+__decorateClass([
+  state()
+], GdsGroupedList.prototype, "_tStyles", 2);
+__decorateClass([
+  property()
+], GdsGroupedList.prototype, "label", 2);
+GdsGroupedList = __decorateClass([
+  gdsCustomElement("gds-grouped-list")
+], GdsGroupedList);
+
+export {
+  GdsGroupedList
+};

package/chunks/chunk.DFYMYEGD.js

@@ -0,0 +1,78 @@
+import {
+  __privateAdd,
+  __privateGet
+} from "./chunk.5VURDMKE.js";
+
+// libs/core/src/controllers/listbox-kb-nav-controller.ts
+var _keyboardNavigationHandler;
+var ListboxKbNavController = class {
+  constructor(host) {
+    __privateAdd(this, _keyboardNavigationHandler, (e) => {
+      var _a, _b;
+      const targetItem = e.target;
+      if (!this.host.navigableItems.includes(targetItem))
+        return;
+      let handled = false;
+      if (e.key === "ArrowDown") {
+        const nextItemIndex = this.host.navigableItems.indexOf(targetItem) + 1;
+        const nextItem = this.host.navigableItems[nextItemIndex];
+        nextItem == null ? void 0 : nextItem.focus();
+        handled = true;
+      } else if (e.key === "ArrowUp") {
+        const prevOptionIndex = this.host.navigableItems.indexOf(targetItem) - 1;
+        const prevItem = this.host.navigableItems[prevOptionIndex];
+        prevItem == null ? void 0 : prevItem.focus();
+        handled = true;
+      } else if (e.key === "Home") {
+        (_a = this.host.navigableItems[0]) == null ? void 0 : _a.focus();
+        handled = true;
+      } else if (e.key === "End") {
+        (_b = this.host.navigableItems[this.host.navigableItems.length - 1]) == null ? void 0 : _b.focus();
+        handled = true;
+      } else {
+        const key = e.key.toLowerCase();
+        if (key.length !== 1) {
+          return;
+        }
+        const isLetter = key >= "a" && key <= "z";
+        const isNumber = key >= "0" && key <= "9";
+        if (isLetter || isNumber) {
+          const firstMatch = this.host.navigableItems.find((el) => {
+            var _a2;
+            const text = (_a2 = el.textContent) == null ? void 0 : _a2.trim().toLowerCase();
+            return text == null ? void 0 : text.startsWith(key);
+          });
+          firstMatch == null ? void 0 : firstMatch.focus();
+          handled = true;
+        }
+      }
+      if (handled) {
+        e.preventDefault();
+        e.stopPropagation();
+      }
+    });
+    ;
+    (this.host = host).addController(this);
+  }
+  hostConnected() {
+    this.host.addEventListener("keydown", __privateGet(this, _keyboardNavigationHandler));
+  }
+  hostDisconnected() {
+    this.host.removeEventListener("keydown", __privateGet(this, _keyboardNavigationHandler));
+  }
+};
+_keyboardNavigationHandler = new WeakMap();
+
+// libs/core/src/utils/helpers/unwrap-slots.ts
+function unwrap(slotRef) {
+  let slot = slotRef;
+  while (slot.assignedElements().length > 0 && slot.assignedElements()[0].nodeName === "SLOT") {
+    slot = slot.assignedElements()[0];
+  }
+  return slot;
+}
+
+export {
+  ListboxKbNavController,
+  unwrap
+};