@birdapi/velinstyle 1.0.0 → 1.2.0

package/dist/chunks/velin-modal-2HOBXE6F.js

@@ -1,176 +0,0 @@
-import {
-  clearBackgroundInert,
-  getFocusableElements,
-  restoreFocus,
-  saveFocus,
-  setBackgroundInert,
-  trapFocus
-} from "./chunk-42VVPW6N.js";
-import {
-  escapeHTML
-} from "./chunk-LA7264K4.js";
-
-// components/velin-modal.js
-var styles = `
-  :host {
-    display: contents;
-  }
-  .overlay {
-    position: fixed;
-    inset: 0;
-    z-index: var(--velin-z-modal, 500);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: var(--velin-space-4, 1rem);
-    background: var(--velin-color-overlay, rgba(0,0,0,0.4));
-    opacity: 0;
-    visibility: hidden;
-    transition: opacity 200ms ease, visibility 200ms ease;
-  }
-  :host([open]) .overlay {
-    opacity: 1;
-    visibility: visible;
-  }
-  .dialog {
-    position: relative;
-    inline-size: min(90vw, 32rem);
-    max-block-size: 85vh;
-    background: var(--velin-color-surface-bright, #fff);
-    border-radius: var(--velin-radius-lg, 0.75rem);
-    box-shadow: var(--velin-shadow-xl, 0 20px 25px rgba(0,0,0,0.1));
-    overflow: hidden;
-    display: flex;
-    flex-direction: column;
-    transform: scale(0.95) translateY(1rem);
-    transition: transform 200ms ease;
-  }
-  :host([open]) .dialog {
-    transform: scale(1) translateY(0);
-  }
-  .header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: var(--velin-space-4, 1rem) var(--velin-space-6, 1.5rem);
-    border-bottom: 1px solid var(--velin-color-border, #ddd);
-  }
-  .title {
-    font-size: var(--velin-text-lg, 1.25rem);
-    font-weight: var(--velin-weight-semibold, 600);
-    margin: 0;
-  }
-  .close-btn {
-    min-width: 2.75rem;
-    min-height: 2.75rem;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    background: none;
-    border: none;
-    border-radius: var(--velin-radius-md, 0.5rem);
-    cursor: pointer;
-    color: var(--velin-color-text-muted, #666);
-    font-size: 1.5rem;
-    line-height: 1;
-  }
-  .close-btn:hover {
-    background: var(--velin-color-surface-dim, #eee);
-    color: var(--velin-color-text, #111);
-  }
-  .body {
-    padding: var(--velin-space-6, 1.5rem);
-    overflow-y: auto;
-    flex-grow: 1;
-  }
-  .footer {
-    display: flex;
-    justify-content: flex-end;
-    gap: var(--velin-space-3, 0.75rem);
-    padding: var(--velin-space-4, 1rem) var(--velin-space-6, 1.5rem);
-    border-top: 1px solid var(--velin-color-border, #ddd);
-  }
-  @media (prefers-reduced-motion: reduce) {
-    .overlay, .dialog { transition: none; }
-  }
-`;
-var VelinModal = class extends HTMLElement {
-  static get observedAttributes() {
-    return ["open"];
-  }
-  constructor() {
-    super();
-    this.attachShadow({ mode: "open", delegatesFocus: true });
-    this._previouslyFocused = null;
-    this._onKeydown = this._onKeydown.bind(this);
-  }
-  connectedCallback() {
-    const title = this.getAttribute("title") || "";
-    const safeTitle = escapeHTML(title);
-    this.shadowRoot.innerHTML = `
-      <style>${styles}</style>
-      <div class="overlay" part="overlay">
-        <div class="dialog" role="dialog" aria-modal="true" aria-labelledby="velin-modal-title" part="dialog">
-          <div class="header" part="header">
-            <h2 class="title" id="velin-modal-title">${safeTitle}</h2>
-            <button class="close-btn" aria-label="Close" part="close">&#215;</button>
-          </div>
-          <div class="body" part="body"><slot></slot></div>
-          <div class="footer" part="footer"><slot name="footer"></slot></div>
-        </div>
-      </div>
-    `;
-    this.shadowRoot.querySelector(".close-btn").addEventListener("click", () => this.close());
-    this.shadowRoot.querySelector(".overlay").addEventListener("click", (e) => {
-      if (e.target === e.currentTarget) this.close();
-    });
-  }
-  attributeChangedCallback(name, oldVal, newVal) {
-    if (name === "open") {
-      if (newVal !== null) {
-        this._open();
-      } else {
-        this._close();
-      }
-    }
-  }
-  open() {
-    this.setAttribute("open", "");
-  }
-  close() {
-    this.removeAttribute("open");
-    this.dispatchEvent(new CustomEvent("velin-close", { bubbles: true }));
-  }
-  _open() {
-    this._previouslyFocused = saveFocus();
-    setBackgroundInert(this);
-    document.addEventListener("keydown", this._onKeydown);
-    document.body.style.overflow = "hidden";
-    requestAnimationFrame(() => {
-      const focusable = getFocusableElements(this.shadowRoot);
-      if (focusable.length > 0) focusable[0].focus();
-    });
-  }
-  _close() {
-    document.removeEventListener("keydown", this._onKeydown);
-    document.body.style.overflow = "";
-    clearBackgroundInert();
-    restoreFocus(this._previouslyFocused);
-  }
-  _onKeydown(event) {
-    if (event.key === "Escape") {
-      this.close();
-      return;
-    }
-    trapFocus(this.shadowRoot, event);
-  }
-  disconnectedCallback() {
-    document.removeEventListener("keydown", this._onKeydown);
-    document.body.style.overflow = "";
-  }
-};
-customElements.define("velin-modal", VelinModal);
-var velin_modal_default = VelinModal;
-export {
-  velin_modal_default as default
-};

package/dist/chunks/velin-modal-GLI2XZZB.js

@@ -1,176 +0,0 @@
-import {
-  clearBackgroundInert,
-  getFocusableElements,
-  restoreFocus,
-  saveFocus,
-  setBackgroundInert,
-  trapFocus
-} from "./chunk-42VVPW6N.js";
-import {
-  escapeHTML
-} from "./chunk-RDE3QE7Z.js";
-
-// components/velin-modal.js
-var styles = `
-  :host {
-    display: contents;
-  }
-  .overlay {
-    position: fixed;
-    inset: 0;
-    z-index: var(--velin-z-modal, 500);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: var(--velin-space-4, 1rem);
-    background: var(--velin-color-overlay, rgba(0,0,0,0.4));
-    opacity: 0;
-    visibility: hidden;
-    transition: opacity 200ms ease, visibility 200ms ease;
-  }
-  :host([open]) .overlay {
-    opacity: 1;
-    visibility: visible;
-  }
-  .dialog {
-    position: relative;
-    inline-size: min(90vw, 32rem);
-    max-block-size: 85vh;
-    background: var(--velin-color-surface-bright, #fff);
-    border-radius: var(--velin-radius-lg, 0.75rem);
-    box-shadow: var(--velin-shadow-xl, 0 20px 25px rgba(0,0,0,0.1));
-    overflow: hidden;
-    display: flex;
-    flex-direction: column;
-    transform: scale(0.95) translateY(1rem);
-    transition: transform 200ms ease;
-  }
-  :host([open]) .dialog {
-    transform: scale(1) translateY(0);
-  }
-  .header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: var(--velin-space-4, 1rem) var(--velin-space-6, 1.5rem);
-    border-bottom: 1px solid var(--velin-color-border, #ddd);
-  }
-  .title {
-    font-size: var(--velin-text-lg, 1.25rem);
-    font-weight: var(--velin-weight-semibold, 600);
-    margin: 0;
-  }
-  .close-btn {
-    min-width: 2.75rem;
-    min-height: 2.75rem;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    background: none;
-    border: none;
-    border-radius: var(--velin-radius-md, 0.5rem);
-    cursor: pointer;
-    color: var(--velin-color-text-muted, #666);
-    font-size: 1.5rem;
-    line-height: 1;
-  }
-  .close-btn:hover {
-    background: var(--velin-color-surface-dim, #eee);
-    color: var(--velin-color-text, #111);
-  }
-  .body {
-    padding: var(--velin-space-6, 1.5rem);
-    overflow-y: auto;
-    flex-grow: 1;
-  }
-  .footer {
-    display: flex;
-    justify-content: flex-end;
-    gap: var(--velin-space-3, 0.75rem);
-    padding: var(--velin-space-4, 1rem) var(--velin-space-6, 1.5rem);
-    border-top: 1px solid var(--velin-color-border, #ddd);
-  }
-  @media (prefers-reduced-motion: reduce) {
-    .overlay, .dialog { transition: none; }
-  }
-`;
-var VelinModal = class extends HTMLElement {
-  static get observedAttributes() {
-    return ["open"];
-  }
-  constructor() {
-    super();
-    this.attachShadow({ mode: "open", delegatesFocus: true });
-    this._previouslyFocused = null;
-    this._onKeydown = this._onKeydown.bind(this);
-  }
-  connectedCallback() {
-    const title = this.getAttribute("title") || "";
-    const safeTitle = escapeHTML(title);
-    this.shadowRoot.innerHTML = `
-      <style>${styles}</style>
-      <div class="overlay" part="overlay">
-        <div class="dialog" role="dialog" aria-modal="true" aria-labelledby="velin-modal-title" part="dialog">
-          <div class="header" part="header">
-            <h2 class="title" id="velin-modal-title">${safeTitle}</h2>
-            <button class="close-btn" aria-label="Close" part="close">&#215;</button>
-          </div>
-          <div class="body" part="body"><slot></slot></div>
-          <div class="footer" part="footer"><slot name="footer"></slot></div>
-        </div>
-      </div>
-    `;
-    this.shadowRoot.querySelector(".close-btn").addEventListener("click", () => this.close());
-    this.shadowRoot.querySelector(".overlay").addEventListener("click", (e) => {
-      if (e.target === e.currentTarget) this.close();
-    });
-  }
-  attributeChangedCallback(name, oldVal, newVal) {
-    if (name === "open") {
-      if (newVal !== null) {
-        this._open();
-      } else {
-        this._close();
-      }
-    }
-  }
-  open() {
-    this.setAttribute("open", "");
-  }
-  close() {
-    this.removeAttribute("open");
-    this.dispatchEvent(new CustomEvent("velin-close", { bubbles: true }));
-  }
-  _open() {
-    this._previouslyFocused = saveFocus();
-    setBackgroundInert(this);
-    document.addEventListener("keydown", this._onKeydown);
-    document.body.style.overflow = "hidden";
-    requestAnimationFrame(() => {
-      const focusable = getFocusableElements(this.shadowRoot);
-      if (focusable.length > 0) focusable[0].focus();
-    });
-  }
-  _close() {
-    document.removeEventListener("keydown", this._onKeydown);
-    document.body.style.overflow = "";
-    clearBackgroundInert();
-    restoreFocus(this._previouslyFocused);
-  }
-  _onKeydown(event) {
-    if (event.key === "Escape") {
-      this.close();
-      return;
-    }
-    trapFocus(this.shadowRoot, event);
-  }
-  disconnectedCallback() {
-    document.removeEventListener("keydown", this._onKeydown);
-    document.body.style.overflow = "";
-  }
-};
-customElements.define("velin-modal", VelinModal);
-var velin_modal_default = VelinModal;
-export {
-  velin_modal_default as default
-};

package/dist/chunks/velin-popover-EXINRIGJ.js

@@ -1,145 +0,0 @@
-import {
-  getFocusableElements,
-  restoreFocus,
-  saveFocus,
-  trapFocus
-} from "./chunk-42VVPW6N.js";
-import {
-  escapeHTML
-} from "./chunk-MKZP2TBH.js";
-
-// components/velin-popover.js
-var styles = `
-  :host { position: relative; display: inline-block; }
-  .popover {
-    position: absolute; z-index: var(--velin-z-dropdown, 200);
-    background: var(--velin-color-surface-bright, #fff);
-    border: 1px solid var(--velin-color-border, #ddd);
-    border-radius: var(--velin-radius-lg, 0.75rem);
-    box-shadow: var(--velin-shadow-lg, 0 10px 15px rgba(0,0,0,0.08));
-    padding: var(--velin-space-4, 1rem);
-    min-inline-size: 12rem; max-inline-size: 20rem;
-    opacity: 0; visibility: hidden;
-    transition: opacity 150ms ease, visibility 150ms ease;
-  }
-  :host([open]) .popover { opacity: 1; visibility: visible; }
-  .popover--top { inset-block-end: calc(100% + 0.5rem); inset-inline-start: 50%; transform: translateX(-50%); }
-  .popover--bottom { inset-block-start: calc(100% + 0.5rem); inset-inline-start: 50%; transform: translateX(-50%); }
-  .popover--start { inset-inline-end: calc(100% + 0.5rem); inset-block-start: 50%; transform: translateY(-50%); }
-  .popover--end { inset-inline-start: calc(100% + 0.5rem); inset-block-start: 50%; transform: translateY(-50%); }
-  .popover__title {
-    font-size: var(--velin-text-sm, 0.875rem); font-weight: var(--velin-weight-semibold, 600);
-    margin-block-end: var(--velin-space-2, 0.5rem);
-    padding-block-end: var(--velin-space-2, 0.5rem);
-    border-bottom: 1px solid var(--velin-color-border, #ddd);
-  }
-  @media (prefers-reduced-motion: reduce) { .popover { transition: none; } }
-`;
-var popoverId = 0;
-var VelinPopover = class extends HTMLElement {
-  static get observedAttributes() {
-    return ["open"];
-  }
-  constructor() {
-    super();
-    this.attachShadow({ mode: "open" });
-    this._popoverId = `velin-popover-${++popoverId}`;
-    this._onOutside = this._onOutside.bind(this);
-    this._onKey = this._onKey.bind(this);
-    this._prevFocus = null;
-    this._isDialog = false;
-  }
-  connectedCallback() {
-    const placement = this.getAttribute("placement") || "bottom";
-    const triggerType = this.getAttribute("trigger") || "click";
-    const title = this.getAttribute("title") || "";
-    const role = triggerType === "hover" ? "tooltip" : "dialog";
-    this._isDialog = role === "dialog";
-    this.shadowRoot.innerHTML = `
-      <style>${styles}</style>
-      <slot name="trigger"></slot>
-      <div class="popover popover--${placement}" id="${this._popoverId}" role="${role}" part="popover">
-        ${title ? `<div class="popover__title" part="title">${escapeHTML(title)}</div>` : ""}
-        <slot></slot>
-      </div>
-    `;
-    const triggerSlot = this.shadowRoot.querySelector('slot[name="trigger"]');
-    triggerSlot.addEventListener("slotchange", () => this._wireTrigger(triggerType));
-    this._wireTrigger(triggerType);
-  }
-  _wireTrigger(triggerType) {
-    const trigger = this.shadowRoot.querySelector('slot[name="trigger"]')?.assignedElements()[0];
-    if (!trigger) return;
-    const isHover = triggerType === "hover";
-    trigger.setAttribute("aria-haspopup", isHover ? "true" : "dialog");
-    trigger.setAttribute("aria-expanded", this.hasAttribute("open") ? "true" : "false");
-    if (this._isDialog) {
-      trigger.setAttribute("aria-controls", this._popoverId);
-    }
-    if (triggerType === "click") {
-      trigger.onclick = () => this.toggle();
-    } else if (triggerType === "hover") {
-      this.onmouseenter = () => this.open();
-      this.onmouseleave = () => this.close();
-      this.onfocusin = () => this.open();
-      this.onfocusout = (e) => {
-        if (!this.contains(e.relatedTarget)) this.close();
-      };
-    } else if (triggerType === "focus") {
-      trigger.onfocusin = () => this.open();
-      trigger.onfocusout = () => this.close();
-    }
-  }
-  open() {
-    this.setAttribute("open", "");
-    const trigger = this.querySelector('[slot="trigger"]');
-    if (trigger) trigger.setAttribute("aria-expanded", "true");
-    document.addEventListener("click", this._onOutside, true);
-    document.addEventListener("keydown", this._onKey);
-    if (this._isDialog) {
-      this._prevFocus = saveFocus();
-      requestAnimationFrame(() => {
-        const focusable = getFocusableElements(this.shadowRoot.querySelector(".popover"));
-        if (focusable.length) focusable[0].focus();
-        else this.shadowRoot.querySelector(".popover")?.focus();
-      });
-    }
-  }
-  close() {
-    this.removeAttribute("open");
-    const trigger = this.querySelector('[slot="trigger"]');
-    if (trigger) trigger.setAttribute("aria-expanded", "false");
-    document.removeEventListener("click", this._onOutside, true);
-    document.removeEventListener("keydown", this._onKey);
-    if (this._isDialog && this._prevFocus) {
-      restoreFocus(this._prevFocus);
-      this._prevFocus = null;
-    }
-  }
-  toggle() {
-    this.hasAttribute("open") ? this.close() : this.open();
-  }
-  _onOutside(e) {
-    if (!this.contains(e.target)) this.close();
-  }
-  _onKey(e) {
-    if (e.key === "Escape") {
-      this.close();
-      const trigger = this.querySelector('[slot="trigger"]');
-      if (trigger) trigger.focus();
-      return;
-    }
-    if (this._isDialog && this.hasAttribute("open")) {
-      trapFocus(this.shadowRoot.querySelector(".popover"), e);
-    }
-  }
-  disconnectedCallback() {
-    document.removeEventListener("click", this._onOutside, true);
-    document.removeEventListener("keydown", this._onKey);
-  }
-};
-customElements.define("velin-popover", VelinPopover);
-var velin_popover_default = VelinPopover;
-export {
-  velin_popover_default as default
-};

package/dist/chunks/velin-popover-OXX7MRZ6.js

@@ -1,145 +0,0 @@
-import {
-  getFocusableElements,
-  restoreFocus,
-  saveFocus,
-  trapFocus
-} from "./chunk-42VVPW6N.js";
-import {
-  escapeHTML
-} from "./chunk-LA7264K4.js";
-
-// components/velin-popover.js
-var styles = `
-  :host { position: relative; display: inline-block; }
-  .popover {
-    position: absolute; z-index: var(--velin-z-dropdown, 200);
-    background: var(--velin-color-surface-bright, #fff);
-    border: 1px solid var(--velin-color-border, #ddd);
-    border-radius: var(--velin-radius-lg, 0.75rem);
-    box-shadow: var(--velin-shadow-lg, 0 10px 15px rgba(0,0,0,0.08));
-    padding: var(--velin-space-4, 1rem);
-    min-inline-size: 12rem; max-inline-size: 20rem;
-    opacity: 0; visibility: hidden;
-    transition: opacity 150ms ease, visibility 150ms ease;
-  }
-  :host([open]) .popover { opacity: 1; visibility: visible; }
-  .popover--top { inset-block-end: calc(100% + 0.5rem); inset-inline-start: 50%; transform: translateX(-50%); }
-  .popover--bottom { inset-block-start: calc(100% + 0.5rem); inset-inline-start: 50%; transform: translateX(-50%); }
-  .popover--start { inset-inline-end: calc(100% + 0.5rem); inset-block-start: 50%; transform: translateY(-50%); }
-  .popover--end { inset-inline-start: calc(100% + 0.5rem); inset-block-start: 50%; transform: translateY(-50%); }
-  .popover__title {
-    font-size: var(--velin-text-sm, 0.875rem); font-weight: var(--velin-weight-semibold, 600);
-    margin-block-end: var(--velin-space-2, 0.5rem);
-    padding-block-end: var(--velin-space-2, 0.5rem);
-    border-bottom: 1px solid var(--velin-color-border, #ddd);
-  }
-  @media (prefers-reduced-motion: reduce) { .popover { transition: none; } }
-`;
-var popoverId = 0;
-var VelinPopover = class extends HTMLElement {
-  static get observedAttributes() {
-    return ["open"];
-  }
-  constructor() {
-    super();
-    this.attachShadow({ mode: "open" });
-    this._popoverId = `velin-popover-${++popoverId}`;
-    this._onOutside = this._onOutside.bind(this);
-    this._onKey = this._onKey.bind(this);
-    this._prevFocus = null;
-    this._isDialog = false;
-  }
-  connectedCallback() {
-    const placement = this.getAttribute("placement") || "bottom";
-    const triggerType = this.getAttribute("trigger") || "click";
-    const title = this.getAttribute("title") || "";
-    const role = triggerType === "hover" ? "tooltip" : "dialog";
-    this._isDialog = role === "dialog";
-    this.shadowRoot.innerHTML = `
-      <style>${styles}</style>
-      <slot name="trigger"></slot>
-      <div class="popover popover--${placement}" id="${this._popoverId}" role="${role}" part="popover">
-        ${title ? `<div class="popover__title" part="title">${escapeHTML(title)}</div>` : ""}
-        <slot></slot>
-      </div>
-    `;
-    const triggerSlot = this.shadowRoot.querySelector('slot[name="trigger"]');
-    triggerSlot.addEventListener("slotchange", () => this._wireTrigger(triggerType));
-    this._wireTrigger(triggerType);
-  }
-  _wireTrigger(triggerType) {
-    const trigger = this.shadowRoot.querySelector('slot[name="trigger"]')?.assignedElements()[0];
-    if (!trigger) return;
-    const isHover = triggerType === "hover";
-    trigger.setAttribute("aria-haspopup", isHover ? "true" : "dialog");
-    trigger.setAttribute("aria-expanded", this.hasAttribute("open") ? "true" : "false");
-    if (this._isDialog) {
-      trigger.setAttribute("aria-controls", this._popoverId);
-    }
-    if (triggerType === "click") {
-      trigger.onclick = () => this.toggle();
-    } else if (triggerType === "hover") {
-      this.onmouseenter = () => this.open();
-      this.onmouseleave = () => this.close();
-      this.onfocusin = () => this.open();
-      this.onfocusout = (e) => {
-        if (!this.contains(e.relatedTarget)) this.close();
-      };
-    } else if (triggerType === "focus") {
-      trigger.onfocusin = () => this.open();
-      trigger.onfocusout = () => this.close();
-    }
-  }
-  open() {
-    this.setAttribute("open", "");
-    const trigger = this.querySelector('[slot="trigger"]');
-    if (trigger) trigger.setAttribute("aria-expanded", "true");
-    document.addEventListener("click", this._onOutside, true);
-    document.addEventListener("keydown", this._onKey);
-    if (this._isDialog) {
-      this._prevFocus = saveFocus();
-      requestAnimationFrame(() => {
-        const focusable = getFocusableElements(this.shadowRoot.querySelector(".popover"));
-        if (focusable.length) focusable[0].focus();
-        else this.shadowRoot.querySelector(".popover")?.focus();
-      });
-    }
-  }
-  close() {
-    this.removeAttribute("open");
-    const trigger = this.querySelector('[slot="trigger"]');
-    if (trigger) trigger.setAttribute("aria-expanded", "false");
-    document.removeEventListener("click", this._onOutside, true);
-    document.removeEventListener("keydown", this._onKey);
-    if (this._isDialog && this._prevFocus) {
-      restoreFocus(this._prevFocus);
-      this._prevFocus = null;
-    }
-  }
-  toggle() {
-    this.hasAttribute("open") ? this.close() : this.open();
-  }
-  _onOutside(e) {
-    if (!this.contains(e.target)) this.close();
-  }
-  _onKey(e) {
-    if (e.key === "Escape") {
-      this.close();
-      const trigger = this.querySelector('[slot="trigger"]');
-      if (trigger) trigger.focus();
-      return;
-    }
-    if (this._isDialog && this.hasAttribute("open")) {
-      trapFocus(this.shadowRoot.querySelector(".popover"), e);
-    }
-  }
-  disconnectedCallback() {
-    document.removeEventListener("click", this._onOutside, true);
-    document.removeEventListener("keydown", this._onKey);
-  }
-};
-customElements.define("velin-popover", VelinPopover);
-var velin_popover_default = VelinPopover;
-export {
-  velin_popover_default as default
-};