placer-toolkit 0.5.1 → 1.0.0-alpha.1

package/dist/internal/tabbable.js

@@ -1,145 +1,142 @@
-const computedStyleMap = new WeakMap();
-function getCachedComputedStyle(el) {
-    let computedStyle = computedStyleMap.get(el);
-    if (!computedStyle) {
-        computedStyle = window.getComputedStyle(el, null);
-        computedStyleMap.set(el, computedStyle);
-    }
-    return computedStyle;
+// src/internal/tabbable.ts
+var computedStyleMap = /* @__PURE__ */ new WeakMap();
+function getCachedComputedStyle(element) {
+  let computedStyle = computedStyleMap.get(element);
+  if (!computedStyle) {
+    computedStyle = window.getComputedStyle(element, null);
+    computedStyleMap.set(element, computedStyle);
+  }
+  return computedStyle;
 }
 function isVisible(element) {
-    if (typeof element.checkVisibility === "function") {
-        return element.checkVisibility({
-            checkOpacity: false,
-            checkVisibilityCSS: true,
-        });
-    }
-    const computedStyle = getCachedComputedStyle(element);
-    return (computedStyle.visibility !== "hidden" &&
-        computedStyle.display !== "none");
+  if (typeof element.checkVisibility === "function") {
+    return element.checkVisibility({
+      checkOpacity: false,
+      checkVisibilityCSS: true
+    });
+  }
+  const computedStyle = getCachedComputedStyle(element);
+  return computedStyle.visibility !== "hidden" && computedStyle.display !== "none";
 }
 function isOverflowingAndTabbable(element) {
-    const computedStyle = getCachedComputedStyle(element);
-    const { overflowY, overflowX } = computedStyle;
-    if (overflowY === "scroll" || overflowX === "scroll") {
-        return true;
-    }
-    if (overflowY !== "auto" || overflowX !== "auto") {
-        return false;
-    }
-    const isOverflowingY = element.scrollHeight > element.clientHeight;
-    if (isOverflowingY && overflowY === "auto") {
-        return true;
-    }
-    const isOverflowingX = element.scrollWidth > element.clientWidth;
-    if (isOverflowingX && overflowX === "auto") {
-        return true;
-    }
+  const computedStyle = getCachedComputedStyle(element);
+  const { overflowY, overflowX } = computedStyle;
+  if (overflowY === "scroll" || overflowX === "scroll") {
+    return true;
+  }
+  if (overflowY !== "auto" || overflowX !== "auto") {
     return false;
+  }
+  const isOverflowingY = element.scrollHeight > element.clientHeight;
+  if (isOverflowingY && overflowY === "auto") {
+    return true;
+  }
+  const isOverflowingX = element.scrollWidth > element.clientWidth;
+  if (isOverflowingX && overflowX === "auto") {
+    return true;
+  }
+  return false;
 }
 function isTabbable(element) {
-    const tag = element.tagName.toLowerCase();
-    const tabindex = Number(element.getAttribute("tabindex"));
-    const hasTabindex = element.hasAttribute("tabindex");
-    if (hasTabindex && (isNaN(tabindex) || tabindex <= -1)) {
-        return false;
-    }
-    if (element.hasAttribute("disabled")) {
-        return false;
-    }
-    if (element.closest("[inert]")) {
-        return false;
-    }
-    if (tag === "input" && element.getAttribute("type") === "radio") {
-        const rootNode = element.getRootNode();
-        const findRadios = `input[type='radio'][name="${element.getAttribute("name")}"]`;
-        const firstChecked = rootNode.querySelector(`${findRadios}:checked`);
-        if (firstChecked) {
-            return firstChecked === element;
-        }
-        const firstRadio = rootNode.querySelector(findRadios);
-        return firstRadio === element;
-    }
-    if (!isVisible(element)) {
-        return false;
-    }
-    if ((tag === "audio" || tag === "video") &&
-        element.hasAttribute("controls")) {
-        return true;
-    }
-    if (element.hasAttribute("tabindex")) {
-        return true;
-    }
-    if (element.hasAttribute("contenteditable") &&
-        element.getAttribute("contenteditable") !== "false") {
-        return true;
-    }
-    const isNativelyTabbable = [
-        "button",
-        "input",
-        "select",
-        "textarea",
-        "a",
-        "audio",
-        "video",
-        "summary",
-        "iframe",
-    ].includes(tag);
-    if (isNativelyTabbable) {
-        return true;
-    }
-    return isOverflowingAndTabbable(element);
+  const tag = element.tagName.toLowerCase();
+  const tabindex = Number(element.getAttribute("tabindex"));
+  const hasTabindex = element.hasAttribute("tabindex");
+  if (hasTabindex && (isNaN(tabindex) || tabindex <= -1)) {
+    return false;
+  }
+  if (element.hasAttribute("disabled")) {
+    return false;
+  }
+  if (element.closest("[inert]")) {
+    return false;
+  }
+  if (tag === "input" && element.getAttribute("type") === "radio") {
+    const rootNode = element.getRootNode();
+    const findRadios = `input[type='radio'][name="${element.getAttribute(
+      "name"
+    )}"]`;
+    const firstChecked = rootNode.querySelector(`${findRadios}:checked`);
+    if (firstChecked) {
+      return firstChecked === element;
+    }
+    const firstRadio = rootNode.querySelector(findRadios);
+    return firstRadio === element;
+  }
+  if (!isVisible(element)) {
+    return false;
+  }
+  if ((tag === "audio" || tag === "video") && element.hasAttribute("controls")) {
+    return true;
+  }
+  if (element.hasAttribute("tabindex")) {
+    return true;
+  }
+  if (element.hasAttribute("contenteditable") && element.getAttribute("contenteditable") !== "false") {
+    return true;
+  }
+  const isNativelyTabbable = [
+    "button",
+    "input",
+    "select",
+    "textarea",
+    "a",
+    "audio",
+    "video",
+    "summary",
+    "iframe"
+  ].includes(tag);
+  if (isNativelyTabbable) {
+    return true;
+  }
+  return isOverflowingAndTabbable(element);
 }
 function getTabbableBoundary(root) {
-    const tabbableElements = getTabbableElements(root);
-    const start = tabbableElements[0] ?? null;
-    const end = tabbableElements[tabbableElements.length - 1] ?? null;
-    return { start, end };
+  const tabbableElements = getTabbableElements(root);
+  const start = tabbableElements[0] ?? null;
+  const end = tabbableElements[tabbableElements.length - 1] ?? null;
+  return { start, end };
 }
 function getSlottedChildrenOutsideRootElement(slotElement, root) {
-    return (slotElement.getRootNode({ composed: true })
-        ?.host !== root);
+  return slotElement.getRootNode({ composed: true })?.host !== root;
 }
 function getTabbableElements(root) {
-    const walkedElements = new WeakMap();
-    const tabbableElements = [];
-    function walk(element) {
-        if (element instanceof Element) {
-            if (element.hasAttribute("inert") || element.closest("[inert]")) {
-                return;
-            }
-            if (walkedElements.has(element)) {
-                return;
-            }
-            walkedElements.set(element, true);
-            if (!tabbableElements.includes(element) && isTabbable(element)) {
-                tabbableElements.push(element);
-            }
-            if (element instanceof HTMLSlotElement &&
-                getSlottedChildrenOutsideRootElement(element, root)) {
-                element
-                    .assignedElements({ flatten: true })
-                    .forEach((assignedElement) => {
-                    if (assignedElement instanceof HTMLElement) {
-                        walk(assignedElement);
-                    }
-                });
-            }
-            if (element.shadowRoot !== null &&
-                element.shadowRoot.mode === "open") {
-                walk(element.shadowRoot);
-            }
-        }
-        for (const e of Array.from(element.children)) {
-            walk(e);
-        }
-    }
-    walk(root);
-    return tabbableElements.sort((a, b) => {
-        const aTabindex = Number(a.getAttribute("tabindex")) || 0;
-        const bTabindex = Number(b.getAttribute("tabindex")) || 0;
-        return bTabindex - aTabindex;
-    });
+  const walkedElements = /* @__PURE__ */ new WeakMap();
+  const tabbableElements = [];
+  function walk(element) {
+    if (element instanceof Element) {
+      if (element.hasAttribute("inert") || element.closest("[inert]")) {
+        return;
+      }
+      if (walkedElements.has(element)) {
+        return;
+      }
+      walkedElements.set(element, true);
+      if (!tabbableElements.includes(element) && isTabbable(element)) {
+        tabbableElements.push(element);
+      }
+      if (element instanceof HTMLSlotElement && getSlottedChildrenOutsideRootElement(element, root)) {
+        element.assignedElements({ flatten: true }).forEach((assignedElement) => {
+          if (assignedElement instanceof HTMLElement) {
+            walk(assignedElement);
+          }
+        });
+      }
+      if (element.shadowRoot !== null && element.shadowRoot.mode === "open") {
+        walk(element.shadowRoot);
+      }
+    }
+    for (const e of Array.from(element.children)) {
+      walk(e);
+    }
+  }
+  walk(root);
+  return tabbableElements.sort((a, b) => {
+    const aTabindex = Number(a.getAttribute("tabindex")) || 0;
+    const bTabindex = Number(b.getAttribute("tabindex")) || 0;
+    return bTabindex - aTabindex;
+  });
 }
-
-export { getTabbableBoundary, getTabbableElements };
+export {
+  getTabbableBoundary,
+  getTabbableElements
+};

package/dist/internal/watch.d.ts

@@ -5,7 +5,18 @@ type UpdateHandlerFunctionKeys<T extends object> = {
     [K in keyof T]-?: NonUndefined<T[K]> extends UpdateHandler ? K : never;
 }[keyof T];
 interface WatchOptions {
+    /** If true, it will only start watching after the initial update/render. */
     waitUntilFirstUpdate?: boolean;
 }
+/**
+ * Runs when observed properties change (e.g., `@property` or `@state`), but before the component updates. To wait for an update to complete after a change occurs, use `await this.updateComplete` in the handler. To start watching after the initial update/render, use `{ waitUntilFirstUpdate: true }` or `this.hasUpdated` in the handler.
+ *
+ * ```typescript
+ * @watch("propertyName")
+ * handlePropertyChange(oldValue, newValue) {
+ *     // …
+ * }
+ * ```
+ */
 export declare function watch(propertyName: string | string[], options?: WatchOptions): <ElemClass extends LitElement>(proto: ElemClass, decoratedFnName: UpdateHandlerFunctionKeys<ElemClass>) => void;
 export {};

package/dist/internal/watch.js

@@ -1,32 +1,32 @@
+// src/internal/watch.ts
 function watch(propertyName, options) {
-    const resolvedOptions = {
-        waitUntilFirstUpdate: false,
-        ...options,
-    };
-    return (proto, decoratedFnName) => {
-        // @ts-expect-error — “update” is a protected property
-        const { update } = proto;
-        const watchedProperties = Array.isArray(propertyName)
-            ? propertyName
-            : [propertyName];
-        // @ts-expect-error — “update” is a protected property
-        proto.update = function (changedProps) {
-            watchedProperties.forEach((property) => {
-                const key = property;
-                if (changedProps.has(key)) {
-                    const oldValue = changedProps.get(key);
-                    const newValue = this[key];
-                    if (oldValue !== newValue) {
-                        if (!resolvedOptions.waitUntilFirstUpdate ||
-                            this.hasUpdated) {
-                            this[decoratedFnName](oldValue, newValue);
-                        }
-                    }
-                }
-            });
-            update.call(this, changedProps);
-        };
+  const resolvedOptions = {
+    waitUntilFirstUpdate: false,
+    ...options
+  };
+  return (proto, decoratedFnName) => {
+    const { update } = proto;
+    const watchedProperties = Array.isArray(propertyName) ? propertyName : [propertyName];
+    proto.update = function(changedProps) {
+      watchedProperties.forEach((property) => {
+        const key = property;
+        if (changedProps.has(key)) {
+          const oldValue = changedProps.get(key);
+          const newValue = this[key];
+          if (oldValue !== newValue) {
+            if (!resolvedOptions.waitUntilFirstUpdate || this.hasUpdated) {
+              this[decoratedFnName](
+                oldValue,
+                newValue
+              );
+            }
+          }
+        }
+      });
+      update.call(this, changedProps);
     };
+  };
 }
-
-export { watch };
+export {
+  watch
+};

package/dist/placer-autoloader.js

@@ -1,41 +1,53 @@
-import { getBasePath } from './utilities/base-path.js';
-
-const observer = new MutationObserver((mutations) => {
-    for (const { addedNodes } of mutations) {
-        for (const node of Array.from(addedNodes)) {
-            if (node.nodeType === Node.ELEMENT_NODE) {
-                discover(node);
-            }
-        }
+// src/placer-autoloader.ts
+var observer = new MutationObserver((mutations) => {
+  for (const { addedNodes } of mutations) {
+    for (const node of Array.from(addedNodes)) {
+      if (node.nodeType === Node.ELEMENT_NODE) {
+        discover(node);
+      }
     }
+  }
 });
 async function discover(root) {
-    const rootTagName = root instanceof Element ? root.tagName.toLowerCase() : "";
-    const rootIsPlacerElement = rootTagName?.startsWith("pc-");
-    const tags = Array.from(root.querySelectorAll(":not(:defined)"))
-        .map((element) => element.tagName.toLowerCase())
-        .filter((tag) => tag.startsWith("pc-"));
-    if (rootIsPlacerElement && !customElements.get(rootTagName)) {
-        tags.push(rootTagName);
-    }
-    const tagsToRegister = [...new Set(tags)];
-    await Promise.allSettled(tagsToRegister.map((tagName) => register(tagName)));
+  const rootTagName = root instanceof Element ? root.tagName.toLowerCase() : "";
+  const rootIsPlacerElement = rootTagName?.startsWith("pc-");
+  const tags = Array.from(root.querySelectorAll(":not(:defined)")).map((element) => element.tagName.toLowerCase()).filter((tag) => tag.startsWith("pc-"));
+  if (rootIsPlacerElement && !customElements.get(rootTagName)) {
+    tags.push(rootTagName);
+  }
+  const tagsToRegister = [...new Set(tags)];
+  await Promise.allSettled(
+    tagsToRegister.map((tagName) => register(tagName))
+  );
 }
 function register(tagName) {
-    if (customElements.get(tagName)) {
-        return Promise.resolve();
-    }
-    const tagWithoutPrefix = tagName.replace(/^pc-/i, "");
-    const path = getBasePath(`components/${tagWithoutPrefix}/${tagWithoutPrefix}.js`);
-    return new Promise((resolve, reject) => {
-        import(/* @vite-ignore */ path)
-            .then(() => resolve())
-            .catch((error) => {
-            reject(new Error(`Unable to auto‐load <${tagName}>: ${error}`));
-        });
+  if (customElements.get(tagName)) {
+    return Promise.resolve();
+  }
+  const tagWithoutPrefix = tagName.replace(/^pc-/i, "");
+  const path = `./components/${tagWithoutPrefix}/${tagWithoutPrefix}.js`;
+  return new Promise((resolve, reject) => {
+    import(
+      /* @vite-ignore */
+      path
+    ).then(() => {
+      document.querySelectorAll(tagName).forEach((element) => {
+        customElements.upgrade(element);
+      });
+      resolve();
+    }).catch((error) => {
+      reject(new Error(`Unable to auto\u2010load <${tagName}>: ${error}`));
     });
+  });
+}
+if (document.readyState !== "loading") {
+  discover(document.body);
+} else {
+  document.addEventListener("DOMContentLoaded", () => {
+    discover(document.body);
+  });
 }
-discover(document.body);
 observer.observe(document.documentElement, { subtree: true, childList: true });
-
-export { discover };
+export {
+  discover
+};

package/dist/placer.d.ts

@@ -1,44 +1,47 @@
 import "./global-shims.js";
-export { default as PcAnimation } from "./components/animation/animation.js";
-export { default as PcAvatar } from "./components/avatar/avatar.js";
-export { default as PcBadge } from "./components/badge/badge.js";
-export { default as PcButton } from "./components/button/button.js";
-export { default as PcButtonGroup } from "./components/button-group/button-group.js";
-export { default as PcCallout } from "./components/callout/callout.js";
-export { default as PcCard } from "./components/card/card.js";
-export { default as PcCheckbox } from "./components/checkbox/checkbox.js";
-export { default as PcComparer } from "./components/comparer/comparer.js";
-export { default as PcCopyButton } from "./components/copy-button/copy-button.js";
-export { default as PcDetails } from "./components/details/details.js";
-export { default as PcDialog } from "./components/dialog/dialog.js";
-export { default as PcDivider } from "./components/divider/divider.js";
-export { default as PcDrawer } from "./components/drawer/drawer.js";
-export { default as PcDropdown } from "./components/dropdown/dropdown.js";
-export { default as PcIcon } from "./components/icon/icon.js";
-export { default as PcIconButton } from "./components/icon-button/icon-button.js";
-export { default as PcInput } from "./components/input/input.js";
-export { default as PcMenu } from "./components/menu/menu.js";
-export { default as PcMenuItem } from "./components/menu-item/menu-item.js";
-export { default as PcMenuLabel } from "./components/menu-label/menu-label.js";
-export { default as PcOption } from "./components/option/option.js";
-export { default as PcPopup } from "./components/popup/popup.js";
-export { default as PcQrCode } from "./components/qr-code/qr-code.js";
-export { default as PcRadio } from "./components/radio/radio.js";
-export { default as PcRadioButton } from "./components/radio-button/radio-button.js";
-export { default as PcRadioGroup } from "./components/radio-group/radio-group.js";
-export { default as PcRating } from "./components/rating/rating.js";
-export { default as PcResizeObserver } from "./components/resize-observer/resize-observer.js";
-export { default as PcSelect } from "./components/select/select.js";
-export { default as PcSpinner } from "./components/spinner/spinner.js";
-export { default as PcSwitch } from "./components/switch/switch.js";
-export { default as PcTab } from "./components/tab/tab.js";
-export { default as PcTabGroup } from "./components/tab-group/tab-group.js";
-export { default as PcTabPanel } from "./components/tab-panel/tab-panel.js";
-export { default as PcTag } from "./components/tag/tag.js";
-export { default as PcTooltip } from "./components/tooltip/tooltip.js";
+export { PcAnimation } from "./components/animation/animation.js";
+export { PcAvatar } from "./components/avatar/avatar.js";
+export { PcBadge } from "./components/badge/badge.js";
+export { PcButton } from "./components/button/button.js";
+export { PcButtonGroup } from "./components/button-group/button-group.js";
+export { PcCallout } from "./components/callout/callout.js";
+export { PcCard } from "./components/card/card.js";
+export { PcCheckbox } from "./components/checkbox/checkbox.js";
+export { PcComparer } from "./components/comparer/comparer.js";
+export { PcCopyButton } from "./components/copy-button/copy-button.js";
+export { PcDetails } from "./components/details/details.js";
+export { PcDialog } from "./components/dialog/dialog.js";
+export { PcDivider } from "./components/divider/divider.js";
+export { PcDrawer } from "./components/drawer/drawer.js";
+export { PcDropdown } from "./components/dropdown/dropdown.js";
+export { PcDropdownItem } from "./components/dropdown-item/dropdown-item.js";
+export { PcFormatBytes } from "./components/format-bytes/format-bytes.js";
+export { PcFormatDate } from "./components/format-date/format-date.js";
+export { PcFormatNumber } from "./components/format-number/format-number.js";
+export { PcIcon } from "./components/icon/icon.js";
+export { PcInput } from "./components/input/input.js";
+export { PcMutationObserver } from "./components/mutation-observer/mutation-observer.js";
+export { PcOption } from "./components/option/option.js";
+export { PcPopup } from "./components/popup/popup.js";
+export { PcQrCode } from "./components/qr-code/qr-code.js";
+export { PcRadio } from "./components/radio/radio.js";
+export { PcRadioGroup } from "./components/radio-group/radio-group.js";
+export { PcRating } from "./components/rating/rating.js";
+export { PcResizeObserver } from "./components/resize-observer/resize-observer.js";
+export { PcScroller } from "./components/scroller/scroller.js";
+export { PcSelect } from "./components/select/select.js";
+export { PcSpinner } from "./components/spinner/spinner.js";
+export { PcSwitch } from "./components/switch/switch.js";
+export { PcTab } from "./components/tab/tab.js";
+export { PcTabGroup } from "./components/tab-group/tab-group.js";
+export { PcTabPanel } from "./components/tab-panel/tab-panel.js";
+export { PcTag } from "./components/tag/tag.js";
+export { PcTextarea } from "./components/textarea/textarea.js";
+export { PcTooltip } from "./components/tooltip/tooltip.js";
 export * from "./utilities/animation-registry.js";
 export * from "./utilities/animation.js";
-export * from "./utilities/base-path.js";
 export * from "./utilities/form.js";
 export * from "./utilities/icon-library.js";
+export * from "./utilities/localize.js";
+export * from "./utilities/kit-code.js";
 export * from "./events/events.js";