@nl-design-system-community/clippy-components 1.2.0 → 2.0.0

package/dist/clippy-toggletip/index.js

@@ -0,0 +1,180 @@
+import { s as safeCustomElement } from "../decorators-Cq82_-g_.js";
+import { css, LitElement, nothing, html } from "lit";
+import { property } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+import "../index-7tZ2Ykfm.js";
+const styles = css`
+  :host {
+    --clippy-toggletip-arrow-size: 0.5rem;
+    --clippy-toggletip-background-color: var(--basis-color-default-inverse-bg-document);
+    --clippy-toggletip-border-radius: var(--basis-border-radius-sm);
+    --clippy-toggletip-color: var(--basis-color-default-inverse-color-default);
+    --clippy-toggletip-font-size: var(--basis-text-font-size-sm);
+    --clippy-toggletip-line-height: var(--basis-text-line-height-sm);
+    --clippy-toggletip-max-inline-size: 18rem;
+    --clippy-toggletip-offset: var(--clippy-toggletip-arrow-size);
+    --clippy-toggletip-padding-block: var(--basis-space-block-sm);
+    --clippy-toggletip-padding-inline: var(--basis-space-inline-md);
+    --clippy-toggletip-z-index: 10;
+
+    position: relative;
+
+    &:not([hidden]) {
+      display: inline-block;
+    }
+  }
+
+  .clippy-toggletip {
+    display: inline-flex;
+    position: relative;
+  }
+
+  .clippy-toggletip__trigger {
+    display: inline-flex;
+  }
+
+  .clippy-toggletip__popup {
+    background-color: var(--clippy-toggletip-background-color);
+    border-end-end-radius: var(--clippy-toggletip-border-radius);
+    border-end-start-radius: var(--clippy-toggletip-border-radius);
+    border-start-end-radius: var(--clippy-toggletip-border-radius);
+    border-start-start-radius: var(--clippy-toggletip-border-radius);
+    color: var(--clippy-toggletip-color);
+    font-size: var(--clippy-toggletip-font-size);
+    inline-size: max-content;
+    isolation: isolate;
+    line-height: var(--clippy-toggletip-line-height);
+    max-inline-size: var(--clippy-toggletip-max-inline-size);
+    opacity: 0%;
+    padding-block: var(--clippy-toggletip-padding-block);
+    padding-inline: var(--clippy-toggletip-padding-inline);
+    pointer-events: none;
+    position: absolute;
+    transition:
+      opacity 120ms ease,
+      visibility 120ms ease;
+    visibility: hidden;
+    z-index: var(--clippy-toggletip-z-index);
+  }
+
+  .clippy-toggletip__popup::before {
+    background-color: inherit;
+    block-size: var(--clippy-toggletip-arrow-size);
+    border-block-end: none;
+    border-block-start: inherit;
+    border-inline-end: inherit;
+    border-inline-start: none;
+    content: '';
+    inline-size: var(--clippy-toggletip-arrow-size);
+    position: absolute;
+    transform: rotate(45deg);
+    z-index: -1;
+  }
+
+  .clippy-toggletip--block-start .clippy-toggletip__popup {
+    inset-block-end: calc(100% + var(--clippy-toggletip-offset));
+    inset-inline-start: 50%;
+    transform: translate(-50%, 0.25rem);
+  }
+
+  .clippy-toggletip--block-start .clippy-toggletip__popup::before {
+    inset-block-start: calc(100% - var(--clippy-toggletip-arrow-size) / 2);
+    inset-inline-start: calc(50% - var(--clippy-toggletip-arrow-size) / 2);
+  }
+
+  .clippy-toggletip--inline-end .clippy-toggletip__popup {
+    inset-block-start: 50%;
+    inset-inline-start: calc(100% + var(--clippy-toggletip-offset));
+    transform: translate(-0.25rem, -50%);
+  }
+
+  .clippy-toggletip--inline-end .clippy-toggletip__popup::before {
+    inset-block-start: calc(50% - var(--clippy-toggletip-arrow-size) / 2);
+    inset-inline-start: calc(var(--clippy-toggletip-arrow-size) / -2);
+    transform: rotate(-135deg);
+  }
+
+  .clippy-toggletip--block-end .clippy-toggletip__popup {
+    inset-block-start: calc(100% + var(--clippy-toggletip-offset));
+    inset-inline-start: 50%;
+    transform: translate(-50%, -0.25rem);
+  }
+
+  .clippy-toggletip--block-end .clippy-toggletip__popup::before {
+    inset-block-start: calc(var(--clippy-toggletip-arrow-size) / -2);
+    inset-inline-start: calc(50% - var(--clippy-toggletip-arrow-size) / 2);
+    transform: rotate(225deg);
+  }
+
+  .clippy-toggletip--inline-start .clippy-toggletip__popup {
+    inset-block-start: 50%;
+    inset-inline-end: calc(100% + var(--clippy-toggletip-offset));
+    transform: translate(0.25rem, -50%);
+  }
+
+  .clippy-toggletip--inline-start .clippy-toggletip__popup::before {
+    inset-block-start: calc(50% - var(--clippy-toggletip-arrow-size) / 2);
+    inset-inline-end: calc(var(--clippy-toggletip-arrow-size) / -2);
+    transform: rotate(45deg);
+  }
+
+  :host(:is(:hover, :focus-within)) .clippy-toggletip__popup {
+    opacity: 100%;
+    visibility: visible;
+  }
+`;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+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;
+};
+const tag = "clippy-toggletip";
+const validPositions = /* @__PURE__ */ new Set(["block-start", "inline-end", "block-end", "inline-start"]);
+const fromAttribute = (value) => {
+  if (value === null) {
+    return "block-start";
+  }
+  if (validPositions.has(value)) {
+    return value;
+  }
+  console.warn(`Invalid position "${value}". Using default "block-start".`);
+  return "block-start";
+};
+let ClippyToggletip = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.text = "";
+    this.position = "block-start";
+  }
+  render() {
+    return html`
+      <span class=${classMap({ [`clippy-toggletip--${this.position}`]: true, "clippy-toggletip": true })}>
+        <span class="clippy-toggletip__trigger">
+          <slot></slot>
+        </span>
+        <span class="clippy-toggletip__popup" role="tooltip"> ${this.text || nothing} </span>
+      </span>
+    `;
+  }
+};
+ClippyToggletip.styles = [styles];
+__decorateClass([
+  property({ type: String })
+], ClippyToggletip.prototype, "text", 2);
+__decorateClass([
+  property({
+    converter: { fromAttribute },
+    type: String
+  })
+], ClippyToggletip.prototype, "position", 2);
+ClippyToggletip = __decorateClass([
+  safeCustomElement(tag)
+], ClippyToggletip);
+export {
+  ClippyToggletip
+};

package/dist/decorators-Cq82_-g_.js

@@ -0,0 +1,11 @@
+const safeCustomElement = (tagName) => {
+  return (target) => {
+    const registry = globalThis.customElements;
+    if (registry && !registry.get(tagName)) {
+      registry.define(tagName, target);
+    }
+  };
+};
+export {
+  safeCustomElement as s
+};

package/dist/en-D1kE0w6o.js

@@ -0,0 +1,4 @@
+import { C as COLOR_NAMES } from "./index-C9pF3BXT.js";
+export {
+  COLOR_NAMES as default
+};