feat(core): add popover component (#615)

packages/utils/src/dom/index.ts

@@ -7,7 +7,13 @@ export { listen } from './listen';
 export { isHTMLAudioElement, isHTMLMediaElement, isHTMLVideoElement } from './predicates';
 export { type RafThrottled, rafThrottle } from './raf-throttle';
 export { getSlottedElement, querySlot } from './slotted';
-export { supportsAnimationFrame, supportsIdleCallback } from './supports';
+export { applyStyles } from './style';
+export {
+  supportsAnchorPositioning,
+  supportsAnimationFrame,
+  supportsIdleCallback,
+  supportsPopoverAPI,
+} from './supports';
 export { findTrackElement } from './text-track';
 export { serializeTimeRanges } from './time-ranges';
 export type { CustomElement, CustomElementCallbacks } from './types';

packages/utils/src/dom/style.ts

@@ -0,0 +1,11 @@
+import { kebabCase } from '../string/casing';
+
+export function applyStyles(element: HTMLElement, styles: Record<string, string | undefined>): void {
+  for (const [prop, value] of Object.entries(styles)) {
+    if (typeof value === 'string') {
+      // CSS custom properties (--*) are already in the correct format.
+      const key = prop.startsWith('--') ? prop : kebabCase(prop);
+      element.style.setProperty(key, value);
+    }
+  }
+}

packages/utils/src/dom/supports.ts

@@ -5,3 +5,11 @@ export function supportsIdleCallback(): boolean {
 export function supportsAnimationFrame(): boolean {
   return typeof requestAnimationFrame === 'function';
 }
+
+export function supportsPopoverAPI(): boolean {
+  return typeof HTMLElement !== 'undefined' && 'popover' in HTMLElement.prototype;
+}
+
+export function supportsAnchorPositioning(): boolean {
+  return typeof CSS !== 'undefined' && CSS.supports('anchor-name: --a');
+}