@editora/ui-core 0.1.9 → 0.1.12

package/dist/hover-card.cjs.js

@@ -0,0 +1,284 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const C=require("./ElementBase-1b301e7f.js"),E=`
+  :host {
+    --ui-hover-card-z: 1700;
+    --ui-hover-card-radius: var(--base-card-radius, var(--ui-radius, 4px));
+    --ui-hover-card-bg: var(--base-card-bg, var(--color-panel, var(--ui-color-surface, var(--ui-surface, #ffffff))));
+    --ui-hover-card-color: var(--ui-color-text, var(--ui-text, #0f172a));
+    --ui-hover-card-border-color: color-mix(in srgb, var(--ui-color-border, #cbd5e1) 74%, transparent);
+    --ui-hover-card-border: var(--base-card-border, 1px solid var(--ui-hover-card-border-color));
+    --ui-hover-card-shadow: var(--base-card-shadow, var(--shadow-3, none));
+    --ui-hover-card-padding: var(--ui-default-gap, 8px);
+    --ui-hover-card-min-width: 220px;
+    --ui-hover-card-max-width: min(380px, calc(100vw - 16px));
+    --ui-hover-card-backdrop: var(--base-panel-backdrop, var(--backdrop-filter-panel, none));
+    --ui-hover-card-arrow-size: 10px;
+    --ui-hover-card-focus-ring: var(--ui-color-focus-ring, var(--ui-focus-ring, #2563eb));
+    --ui-hover-card-accent: var(--ui-color-primary, var(--ui-primary, #2563eb));
+    color-scheme: light dark;
+    position: relative;
+    display: inline-flex;
+    width: fit-content;
+    min-width: 0;
+  }
+
+  .anchor {
+    display: inline-flex;
+    min-width: 0;
+  }
+
+  .panel {
+    position: fixed;
+    left: 0;
+    top: 0;
+    width: max-content;
+    min-width: var(--ui-hover-card-min-width);
+    max-width: var(--ui-hover-card-max-width);
+    box-sizing: border-box;
+    border-radius: var(--ui-hover-card-radius);
+    border: var(--ui-hover-card-border);
+    background: var(--ui-hover-card-bg);
+    color: var(--ui-hover-card-color);
+    box-shadow: var(--ui-hover-card-shadow);
+    backdrop-filter: var(--ui-hover-card-backdrop);
+    opacity: 0;
+    visibility: hidden;
+    pointer-events: none;
+    transform: translateY(6px) scale(0.985);
+    transform-origin: top center;
+    transition:
+      opacity 170ms cubic-bezier(0.2, 0.9, 0.24, 1),
+      transform 170ms cubic-bezier(0.2, 0.9, 0.24, 1),
+      visibility 170ms ease;
+    z-index: var(--ui-hover-card-z);
+    overflow: visible;
+    isolation: isolate;
+  }
+
+  :host([open]) .panel[data-ready="true"] {
+    opacity: 1;
+    visibility: visible;
+    pointer-events: auto;
+    transform: translateY(0) scale(1);
+  }
+
+  .panel[data-placement="top"] {
+    transform-origin: bottom center;
+  }
+
+  .panel[data-placement="left"] {
+    transform-origin: center right;
+  }
+
+  .panel[data-placement="right"] {
+    transform-origin: center left;
+  }
+
+  .panel-body {
+    position: relative;
+    z-index: 1;
+    min-width: 0;
+    padding: var(--ui-hover-card-padding);
+    display: grid;
+    gap: var(--ui-default-gap, 8px);
+    font: 500 var(--ui-default-font-size, var(--font-size-2, 14px))/var(--ui-default-line-height, var(--line-height-2, 20px)) var(--ui-font-family, "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
+    letter-spacing: var(--ui-default-letter-spacing, var(--letter-spacing-2, 0em));
+  }
+
+  .arrow {
+    position: absolute;
+    width: var(--ui-hover-card-arrow-size);
+    height: var(--ui-hover-card-arrow-size);
+    background: var(--ui-hover-card-bg);
+    border: var(--ui-hover-card-border);
+    transform: rotate(45deg);
+    pointer-events: none;
+  }
+
+  .panel[data-placement="bottom"] .arrow {
+    left: calc(var(--ui-hover-card-arrow-x, 24px) - (var(--ui-hover-card-arrow-size) / 2));
+    top: calc(var(--ui-hover-card-arrow-size) * -0.56);
+    border-right: none;
+    border-bottom: none;
+  }
+
+  .panel[data-placement="top"] .arrow {
+    left: calc(var(--ui-hover-card-arrow-x, 24px) - (var(--ui-hover-card-arrow-size) / 2));
+    bottom: calc(var(--ui-hover-card-arrow-size) * -0.56);
+    border-left: none;
+    border-top: none;
+  }
+
+  .panel[data-placement="right"] .arrow {
+    top: calc(var(--ui-hover-card-arrow-y, 24px) - (var(--ui-hover-card-arrow-size) / 2));
+    left: calc(var(--ui-hover-card-arrow-size) * -0.56);
+    border-right: none;
+    border-top: none;
+  }
+
+  .panel[data-placement="left"] .arrow {
+    top: calc(var(--ui-hover-card-arrow-y, 24px) - (var(--ui-hover-card-arrow-size) / 2));
+    right: calc(var(--ui-hover-card-arrow-size) * -0.56);
+    border-left: none;
+    border-bottom: none;
+  }
+
+  :host([variant="line"]) {
+    --ui-hover-card-shadow: none;
+  }
+
+  :host([variant="line"]) .panel {
+    border-color: color-mix(in srgb, var(--ui-hover-card-accent) 26%, var(--ui-hover-card-border-color));
+  }
+
+  :host([variant="glass"]) {
+    --ui-hover-card-bg:
+      linear-gradient(
+        180deg,
+        color-mix(in srgb, var(--ui-color-surface, #ffffff) 86%, #ffffff 14%),
+        color-mix(in srgb, var(--ui-color-surface, #ffffff) 92%, transparent)
+      ),
+      var(--ui-color-surface, #ffffff);
+    --ui-hover-card-backdrop: blur(12px) saturate(1.08);
+  }
+
+  :host([variant="contrast"]) {
+    --ui-hover-card-bg: #0f172a;
+    --ui-hover-card-color: #e2e8f0;
+    --ui-hover-card-border-color: #334155;
+    --ui-hover-card-focus-ring: #93c5fd;
+    --ui-hover-card-shadow:
+      0 2px 8px rgba(2, 6, 23, 0.24),
+      0 30px 62px rgba(2, 6, 23, 0.4);
+  }
+
+  :host([variant="contrast"]) .arrow {
+    background: #0f172a;
+    border-color: #334155;
+  }
+
+  :host([variant="minimal"]) {
+    --ui-hover-card-shadow: none;
+    --ui-hover-card-border-color: color-mix(in srgb, var(--ui-hover-card-accent) 20%, var(--ui-color-border, #cbd5e1));
+    --ui-hover-card-padding: 10px;
+  }
+
+  :host([variant="elevated"]) {
+    --ui-hover-card-bg: linear-gradient(
+      160deg,
+      color-mix(in srgb, var(--ui-color-surface, #ffffff) 92%, #ffffff 8%),
+      color-mix(in srgb, var(--ui-color-surface, #ffffff) 99%, transparent)
+    );
+    --ui-hover-card-shadow:
+      0 2px 10px rgba(2, 6, 23, 0.12),
+      0 34px 72px rgba(2, 6, 23, 0.22);
+  }
+
+  :host([tone="success"]) {
+    --ui-hover-card-accent: #16a34a;
+  }
+
+  :host([tone="warning"]) {
+    --ui-hover-card-accent: #d97706;
+  }
+
+  :host([tone="danger"]) {
+    --ui-hover-card-accent: #dc2626;
+  }
+
+  :host([density="compact"]) {
+    --ui-hover-card-padding: 9px;
+  }
+
+  :host([density="compact"]) .panel-body {
+    font-size: 12px;
+    gap: 6px;
+  }
+
+  :host([density="comfortable"]) {
+    --ui-hover-card-padding: 15px;
+  }
+
+  :host([density="comfortable"]) .panel-body {
+    font-size: 14px;
+    gap: 10px;
+  }
+
+  :host([shape="square"]) {
+    --ui-hover-card-radius: 4px;
+  }
+
+  :host([shape="soft"]) {
+    --ui-hover-card-radius: 20px;
+  }
+
+  :host([elevation="none"]) {
+    --ui-hover-card-shadow: none;
+  }
+
+  :host([elevation="low"]) {
+    --ui-hover-card-shadow:
+      0 1px 3px rgba(2, 6, 23, 0.06),
+      0 16px 30px rgba(2, 6, 23, 0.11);
+  }
+
+  :host([elevation="high"]) {
+    --ui-hover-card-shadow:
+      0 2px 10px rgba(2, 6, 23, 0.1),
+      0 36px 74px rgba(2, 6, 23, 0.24);
+  }
+
+  :host([headless]) .panel {
+    display: none;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .panel {
+      transition: none !important;
+      transform: none !important;
+    }
+  }
+
+  @media (prefers-contrast: more) {
+    :host {
+      --ui-hover-card-border: 2px solid var(--ui-hover-card-border-color);
+      --ui-hover-card-shadow: none;
+    }
+  }
+
+  @media (forced-colors: active) {
+    :host {
+      --ui-hover-card-bg: Canvas;
+      --ui-hover-card-color: CanvasText;
+      --ui-hover-card-border-color: CanvasText;
+      --ui-hover-card-shadow: none;
+      --ui-hover-card-backdrop: none;
+    }
+
+    .panel,
+    .arrow {
+      forced-color-adjust: none;
+      background: Canvas;
+      color: CanvasText;
+      box-shadow: none;
+    }
+  }
+`;function d(h,e,r){return Math.max(e,Math.min(r,h))}function L(h){return h==="top"||h==="left"||h==="right"?h:"bottom"}class w extends C.ElementBase{constructor(){super(),this._openTimer=null,this._closeTimer=null,this._positionRaf=null,this._isOpen=!1,this._globalListenersBound=!1,this._onPointerEnter=this._onPointerEnter.bind(this),this._onPointerLeave=this._onPointerLeave.bind(this),this._onFocusIn=this._onFocusIn.bind(this),this._onFocusOut=this._onFocusOut.bind(this),this._onKeyDown=this._onKeyDown.bind(this),this._onDocumentPointerDown=this._onDocumentPointerDown.bind(this),this._onViewportChange=this._onViewportChange.bind(this),this._onSlotChange=this._onSlotChange.bind(this)}static get observedAttributes(){return["open","headless","delay","close-delay","placement","offset","variant","tone","density","shape","elevation"]}connectedCallback(){super.connectedCallback(),this.addEventListener("pointerenter",this._onPointerEnter),this.addEventListener("pointerleave",this._onPointerLeave),this.addEventListener("focusin",this._onFocusIn),this.addEventListener("focusout",this._onFocusOut),this.addEventListener("keydown",this._onKeyDown),this.root.addEventListener("slotchange",this._onSlotChange),this._syncOpenState()}disconnectedCallback(){this.removeEventListener("pointerenter",this._onPointerEnter),this.removeEventListener("pointerleave",this._onPointerLeave),this.removeEventListener("focusin",this._onFocusIn),this.removeEventListener("focusout",this._onFocusOut),this.removeEventListener("keydown",this._onKeyDown),this.root.removeEventListener("slotchange",this._onSlotChange),this._unbindGlobalListeners(),this._clearTimers(),this._positionRaf!=null&&(cancelAnimationFrame(this._positionRaf),this._positionRaf=null),super.disconnectedCallback()}attributeChangedCallback(e,r,t){if(r!==t){if(e==="open"||e==="headless"){this._syncOpenState();return}this._isOpen&&(e==="placement"||e==="offset"||e==="density"||e==="shape")&&this._schedulePosition()}}get open(){return this.hasAttribute("open")}set open(e){e?this.setAttribute("open",""):this.removeAttribute("open")}get delay(){const e=Number(this.getAttribute("delay"));return Number.isFinite(e)&&e>=0?e:120}set delay(e){this.setAttribute("delay",String(e))}get closeDelay(){const e=Number(this.getAttribute("close-delay"));return Number.isFinite(e)&&e>=0?e:this.delay}set closeDelay(e){this.setAttribute("close-delay",String(e))}_onSlotChange(){this._isOpen&&this._schedulePosition()}_getPanel(){return this.root.querySelector(".panel")}_getAnchor(){const e=this.querySelector('[slot="trigger"]');return e||Array.from(this.children).find(t=>t instanceof HTMLElement?!t.hasAttribute("slot")||t.getAttribute("slot")==="trigger":!1)||this}_isNodeWithinComponent(e){return e?!!(e===this||this.contains(e)||this.root.contains(e)):!1}_clearTimers(){this._openTimer!=null&&(window.clearTimeout(this._openTimer),this._openTimer=null),this._closeTimer!=null&&(window.clearTimeout(this._closeTimer),this._closeTimer=null)}_scheduleOpen(e){this._clearTimers(),this._openTimer=window.setTimeout(()=>{this._openTimer=null,this.open=!0},Math.max(0,e))}_scheduleClose(e){this._clearTimers(),this._closeTimer=window.setTimeout(()=>{this._closeTimer=null,this.open=!1},Math.max(0,e))}_onPointerEnter(){if(!this.hasAttribute("headless")){if(this._isOpen){this._clearTimers();return}this._scheduleOpen(this.delay)}}_onPointerLeave(e){const r=e.relatedTarget;this._isNodeWithinComponent(r)||this._scheduleClose(this.closeDelay)}_onFocusIn(){this.hasAttribute("headless")||(this._clearTimers(),this.open=!0)}_onFocusOut(e){const r=e.relatedTarget;this._isNodeWithinComponent(r)||this._scheduleClose(this.closeDelay)}_onKeyDown(e){if(!this._isOpen||e.key!=="Escape")return;e.preventDefault(),this.open=!1;const r=this._getAnchor();try{r.focus()}catch{}}_onDocumentPointerDown(e){!this._isOpen||e.composedPath().includes(this)||(this.open=!1)}_onViewportChange(){this._isOpen&&this._schedulePosition()}_syncOpenState(){const e=this.hasAttribute("open")&&!this.hasAttribute("headless");if(e===this._isOpen){this._syncPanelA11y(),e?(this._bindGlobalListeners(),this._schedulePosition()):this._unbindGlobalListeners();return}this._isOpen=e,this._syncPanelA11y();const r=this._getPanel();if(e){this._bindGlobalListeners(),r&&r.setAttribute("data-ready","false"),this.dispatchEvent(new CustomEvent("open",{bubbles:!0})),this.dispatchEvent(new CustomEvent("show",{bubbles:!0})),this.dispatchEvent(new CustomEvent("change",{bubbles:!0,detail:{open:!0}})),this._schedulePosition();return}this._unbindGlobalListeners(),this._clearTimers(),this._positionRaf!=null&&(cancelAnimationFrame(this._positionRaf),this._positionRaf=null),r&&r.setAttribute("data-ready","false"),this.dispatchEvent(new CustomEvent("close",{bubbles:!0})),this.dispatchEvent(new CustomEvent("hide",{bubbles:!0})),this.dispatchEvent(new CustomEvent("change",{bubbles:!0,detail:{open:!1}}))}_syncPanelA11y(){const e=this._getPanel();e&&(e.setAttribute("aria-hidden",this._isOpen?"false":"true"),this._isOpen||e.setAttribute("data-ready","false"))}_bindGlobalListeners(){this._globalListenersBound||(document.addEventListener("pointerdown",this._onDocumentPointerDown,!0),window.addEventListener("resize",this._onViewportChange),window.addEventListener("scroll",this._onViewportChange,!0),this._globalListenersBound=!0)}_unbindGlobalListeners(){this._globalListenersBound&&(document.removeEventListener("pointerdown",this._onDocumentPointerDown,!0),window.removeEventListener("resize",this._onViewportChange),window.removeEventListener("scroll",this._onViewportChange,!0),this._globalListenersBound=!1)}_schedulePosition(){this._isOpen&&(this._positionRaf!=null&&cancelAnimationFrame(this._positionRaf),this._positionRaf=requestAnimationFrame(()=>{this._positionRaf=null,this._positionPanel()}))}_positionPanel(){const e=this._getPanel();if(!e||!this._isOpen)return;const r=this._getAnchor();if(!r||!r.isConnected){this.open=!1;return}const t=r.getBoundingClientRect();if(t.width===0&&t.height===0){this.open=!1;return}const u=e.getBoundingClientRect(),l=u.width||e.offsetWidth||220,c=u.height||e.offsetHeight||80,p=window.innerWidth,f=window.innerHeight,o=8,v=Number(this.getAttribute("offset")),n=Number.isFinite(v)?v:10;let i=L(this.getAttribute("placement"));const b=t.top-n-c>=o,m=t.bottom+n+c<=f-o,g=t.left-n-l>=o,_=t.right+n+l<=p-o;i==="top"&&!b&&m&&(i="bottom"),i==="bottom"&&!m&&b&&(i="top"),i==="left"&&!g&&_&&(i="right"),i==="right"&&!_&&g&&(i="left");let a=0,s=0;i==="top"?(a=t.left+(t.width-l)/2,s=t.top-c-n):i==="bottom"?(a=t.left+(t.width-l)/2,s=t.bottom+n):i==="left"?(a=t.left-l-n,s=t.top+(t.height-c)/2):(a=t.right+n,s=t.top+(t.height-c)/2),a=d(a,o,p-l-o),s=d(s,o,f-c-o),e.style.left=`${Math.round(a)}px`,e.style.top=`${Math.round(s)}px`,e.setAttribute("data-placement",i);const y=d(t.left+t.width/2-a,14,l-14),x=d(t.top+t.height/2-s,14,c-14);e.style.setProperty("--ui-hover-card-arrow-x",`${Math.round(y)}px`),e.style.setProperty("--ui-hover-card-arrow-y",`${Math.round(x)}px`),e.setAttribute("data-ready","true")}render(){this.setContent(`
+      <style>${E}</style>
+      <div class="anchor" part="anchor">
+        <slot name="trigger"></slot>
+        <slot></slot>
+      </div>
+      <div
+        class="panel"
+        part="panel"
+        role="dialog"
+        aria-modal="false"
+        aria-hidden="${this._isOpen?"false":"true"}"
+        tabindex="-1"
+        data-placement="bottom"
+        data-ready="false"
+      >
+        <div class="arrow" part="arrow" aria-hidden="true"></div>
+        <div class="panel-body" part="body"><slot name="card"></slot></div>
+      </div>
+    `),this._syncPanelA11y(),this._isOpen&&this._schedulePosition()}shouldRenderOnAttributeChange(e,r,t){return!1}}typeof customElements<"u"&&!customElements.get("ui-hover-card")&&customElements.define("ui-hover-card",w);exports.UIHoverCard=w;