@geoffcox/sterling-svelte 0.0.31 → 1.0.1

package/@types/clickOutside.d.ts

@@ -1,11 +1,15 @@
-declare namespace svelte.JSX {
-  type ClickOutsideEventDetail = {
-    mouseEvent: MouseEvent;
-  };
+import type { EventHandler } from 'svelte/elements';
 
-  type ClickOutsideEvent = CustomEvent<ClickOutsideEventDetail>;
+export type ClickOutsideEventDetail = {
+  mouseEvent: MouseEvent;
+};
 
-  interface DOMAttributes<T> {
-    onclick_outside?: (e: ClickOutsideEvent) => void;
+export type ClickOutsideEvent = CustomEvent<ClickOutsideEventDetail>;
+
+declare module 'svelte/elements' {
+  export interface DOMAttributes<T extends EventTarget> {
+    'on:click_outside'?: EventHandler<ClickOutsideEvent, T>;
   }
 }
+
+export {}; // ensure this is not an ambient module, else types will be overridden instead of augmented

package/Button.svelte

@@ -1,16 +1,18 @@
-<script>export let disabled = false;
-export let variant = "regular";
-export let shape = "rounded";
-export let colorful = false;
+<script>// ----- Props ----- //
+export let disabled = false;
+/** Additional class names to apply. */
+export let variant = '';
+// ----- State ----- //
 let buttonRef;
+// ----- Methods ----- //
 export const click = () => {
-  buttonRef?.click();
+    buttonRef?.click();
 };
 export const blur = () => {
-  buttonRef?.blur();
+    buttonRef?.blur();
 };
 export const focus = (options) => {
-  buttonRef?.focus(options);
+    buttonRef?.focus(options);
 };
 </script>
 
@@ -20,12 +22,7 @@ export const focus = (options) => {
 -->
 <button
   bind:this={buttonRef}
-  class="sterling-button"
-  class:colorful
-  class:square={shape === 'square'}
-  class:circular={shape === 'circular'}
-  class:outline={variant === 'outline'}
-  class:ghost={variant === 'ghost'}
+  class={`sterling-button ${variant}`}
   {disabled}
   type="button"
   on:blur
@@ -62,174 +59,5 @@ export const focus = (options) => {
   on:wheel|passive
   {...$$restProps}
 >
-  <slot {disabled} {colorful} {shape} {variant} />
+  <slot {disabled} {variant} />
 </button>
-
-<style>
-  button {
-    align-content: center;
-    align-items: center;
-    background-color: var(--stsv-button__background-color);
-    border-color: var(--stsv-button__border-color);
-    border-radius: var(--stsv-button__border-radius);
-    border-style: var(--stsv-button__border-style);
-    border-width: var(--stsv-button__border-width);
-    box-sizing: border-box;
-    color: var(--stsv-button__color);
-    cursor: pointer;
-    display: inline-flex;
-    flex-direction: row;
-    font: inherit;
-    justify-content: center;
-    justify-items: center;
-    column-gap: 0.25em;
-    overflow: hidden;
-    padding: 0.5em 1em;
-    text-decoration: none;
-    text-overflow: ellipsis;
-    transition: background-color 250ms, color 250ms, border-color 250ms;
-    white-space: nowrap;
-    user-select: none;
-  }
-
-  button.vertical {
-    flex-direction: column;
-    row-gap: 0.15em;
-  }
-
-  button.circular {
-    border-radius: 10000px;
-    padding: 0.5em;
-  }
-
-  button.square {
-    border-radius: 0;
-  }
-
-  button:hover {
-    background-color: var(--stsv-button__background-color--hover);
-    border-color: var(--stsv-button__border-color--hover);
-    color: var(--stsv-button__color--hover);
-  }
-
-  button:active {
-    background-color: var(--stsv-button__background-color--active);
-    border-color: var(--stsv-button__border-color--active);
-    color: var(--stsv-button__color--active);
-  }
-
-  button:focus-visible {
-    border-color: var(--stsv-button__border-color--focus);
-    outline-color: var(--stsv-common__outline-color);
-    outline-offset: var(--stsv-common__outline-offset);
-    outline-style: var(--stsv-common__outline-style);
-    outline-width: var(--stsv-common__outline-width);
-  }
-
-  button.colorful {
-    background-color: var(--stsv-button--colorful__background-color);
-    border-color: var(--stsv-button--colorful__border-color);
-    color: var(--stsv-button--colorful__color);
-  }
-  button.colorful:hover {
-    background-color: var(--stsv-button--colorful__background-color--hover);
-    border-color: var(--stsv-button--colorful__border-color--hover);
-    color: var(--stsv-button--colorful__color--hover);
-  }
-
-  button.colorful:active {
-    background-color: var(--stsv-button--colorful__background-color--active);
-    border-color: var(--stsv-button--colorful__border-color--active);
-    color: var(--stsv-button--colorful__color--active);
-  }
-
-  button.outline {
-    background-color: transparent;
-  }
-
-  button.outline:hover {
-    background-color: var(--stsv-button__background-color--hover);
-  }
-
-  button.outline:active {
-    background-color: var(--stsv-button__background-color--active);
-  }
-
-  button.outline.colorful {
-    border-color: var(--stsv-button--colorful__border-color);
-    color: var(--stsv-button--colorful__border-color);
-  }
-  button.outline.colorful:hover {
-    background-color: var(--stsv-button--colorful__background-color--hover);
-    border-color: var(--stsv-button--colorful__border-color--hover);
-    color: var(--stsv-button--colorful__color--hover);
-  }
-
-  button.outline.colorful:active {
-    background-color: var(--stsv-button--colorful__background-color--active);
-    border-color: var(--stsv-button--colorful__border-color--active);
-    color: var(--stsv-button--colorful__color--active);
-  }
-
-  button.ghost {
-    background-color: transparent;
-    border-color: transparent;
-  }
-
-  button.ghost:hover {
-    background-color: var(--stsv-button__background-color--hover);
-    border-color: transparent;
-  }
-
-  button.ghost:active {
-    background-color: var(--stsv-button__background-color--active);
-    border-color: transparent;
-  }
-
-  button.ghost:focus-visible {
-    border-color: var(--stsv-button__border-color--focus);
-  }
-
-  button.ghost.colorful {
-    color: var(--stsv-button--colorful__border-color);
-  }
-
-  button.ghost.colorful:hover {
-    background-color: var(--stsv-button--colorful__background-color--hover);
-    color: var(--stsv-button--colorful__color--hover);
-  }
-
-  button.ghost.colorful:active {
-    background-color: var(--stsv-button--colorful__background-color--active);
-    color: var(--stsv-button--colorful__color--active);
-  }
-
-  button:disabled {
-    cursor: not-allowed;
-    position: relative;
-  }
-
-  button:disabled::after {
-    content: '';
-    position: absolute;
-    left: 0;
-    right: 0;
-    top: 0;
-    bottom: 0;
-    background: repeating-linear-gradient(
-      var(--stsv-common--disabled__stripe-angle),
-      var(--stsv-common--disabled__stripe-color),
-      var(--stsv-common--disabled__stripe-color) var(--stsv-common--disabled__stripe-width),
-      var(--stsv-common--disabled__stripe-color--alt) var(--stsv-common--disabled__stripe-width),
-      var(--stsv-common--disabled__stripe-color--alt)
-        calc(2 * var(--stsv-common--disabled__stripe-width))
-    );
-    pointer-events: none;
-  }
-
-  @media (prefers-reduced-motion) {
-    button {
-      transition: none;
-    }
-  }
-</style>

package/Button.svelte.d.ts

@@ -3,9 +3,7 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         disabled?: boolean | undefined;
-        variant?: "regular" | "outline" | "ghost" | undefined;
-        shape?: "circular" | "rounded" | "square" | undefined;
-        colorful?: boolean | undefined;
+        variant?: string | undefined;
         click?: (() => void) | undefined;
         blur?: (() => void) | undefined;
         focus?: ((options?: FocusOptions) => void) | undefined;
@@ -49,9 +47,7 @@ declare const __propDef: {
     slots: {
         default: {
             disabled: boolean;
-            colorful: boolean;
-            shape: "circular" | "rounded" | "square";
-            variant: "regular" | "outline" | "ghost";
+            variant: string;
         };
     };
 };

package/Callout.svelte

@@ -1,127 +1,139 @@
-<script>import { onMount } from "svelte";
-import {
-  arrow,
-  autoUpdate,
-  computePosition,
-  flip,
-  offset
-} from "@floating-ui/dom";
-import { portal } from "./actions/portal";
-import { POPOVER_PORTAL_ID } from "./Popover.constants";
-import { fade } from "svelte/transition";
-import { prefersReducedMotion } from "./stores/prefersReducedMotion";
-export let colorful = false;
+<script>import { onMount } from 'svelte';
+import { arrow, autoUpdate, computePosition, flip, offset } from '@floating-ui/dom';
+import { portal } from './actions/portal';
+import { STERLING_PORTAL_HOST_ID } from './Popover.constants';
+import { fade } from 'svelte/transition';
+import { prefersReducedMotion } from './mediaQueries/prefersReducedMotion';
+// ----- Props ----- //
+/** Conditionally renders content based on open. */
 export let conditionalRender = true;
+/** The offset along the side of the reference element. */
 export let crossAxisOffset = 0;
+/** The offset towards or away from the side of the reference element. */
 export let mainAxisOffset = 0;
+/** When true, the callout is open and visible. */
 export let open = false;
-export let placement = "bottom-start";
-export let portalHost = void 0;
+/** How the callout should be positioned relative to the reference element. */
+export let placement = 'bottom-start';
+/** The host container for the callout. */
+export let portalHost = undefined;
+/** The reference to the element anchoring the position of the callout. */
 export let reference;
+/** Additional class names to apply. */
+export let variant = '';
+// ----- State ----- //
 let popupRef;
 let arrowRef;
 let popupPosition = { x: 0, y: 0 };
-$:
-  floatingUIPlacement = placement;
+$: floatingUIPlacement = placement;
+// ----- Portal Host ----- //
 const ensurePortalHost = () => {
-  if (document) {
-    if (portalHost) {
-      return portalHost;
+    if (document) {
+        if (portalHost) {
+            return portalHost;
+        }
+        let host = document.querySelector(`#${STERLING_PORTAL_HOST_ID}`);
+        if (!host) {
+            host = document.createElement('div');
+            host.id = STERLING_PORTAL_HOST_ID;
+            host.style.overflow = 'visible';
+            document.body.append(host);
+        }
+        portalHost = host;
     }
-    let host = document.querySelector(`#${POPOVER_PORTAL_ID}`);
-    if (!host) {
-      host = document.createElement("div");
-      host.id = POPOVER_PORTAL_ID;
-      host.style.overflow = "visible";
-      document.body.append(host);
-    }
-    portalHost = host;
-  }
 };
+// ----- Body Height Change ----- //
 let bodyHeight = 0;
+// create an Observer instance
 const resizeObserver = new ResizeObserver((entries) => {
-  bodyHeight = entries[0].target.clientHeight;
+    bodyHeight = entries[0].target.clientHeight;
 });
-$:
-  middleware = [
+// ----- Position ----- //
+$: middleware = [
     offset({ mainAxis: mainAxisOffset, crossAxis: crossAxisOffset }),
     flip(),
     arrow({ element: arrowRef, padding: 8 })
-  ];
+];
 const computeCalloutPosition = async () => {
-  if (reference && popupRef) {
-    popupPosition = await computePosition(reference, popupRef, {
-      placement: floatingUIPlacement,
-      middleware
-    });
-  } else {
-    popupPosition = { x: 0, y: 0 };
-  }
-};
-let cleanupAutoUpdate = () => {
+    if (reference && popupRef) {
+        popupPosition = await computePosition(reference, popupRef, {
+            placement: floatingUIPlacement,
+            middleware
+        });
+    }
+    else {
+        popupPosition = { x: 0, y: 0 };
+    }
 };
+// whenever a positioned element is portaled it needs resubscription to auto-update
+let cleanupAutoUpdate = () => { };
 const autoUpdateCalloutPosition = () => {
-  cleanupAutoUpdate();
-  if (reference && popupRef) {
-    cleanupAutoUpdate = autoUpdate(reference, popupRef, computeCalloutPosition);
-  }
+    cleanupAutoUpdate();
+    if (reference && popupRef) {
+        cleanupAutoUpdate = autoUpdate(reference, popupRef, computeCalloutPosition);
+    }
 };
-$:
-  popupRef, reference, autoUpdateCalloutPosition();
-$:
-  open, bodyHeight, middleware, placement, computeCalloutPosition();
+$: popupRef, reference, autoUpdateCalloutPosition();
+$: open, bodyHeight, middleware, placement, computeCalloutPosition();
+// ----- Arrow ----- //
 const getArrowPlacementStyle = (position) => {
-  if (position?.placement && arrowRef) {
-    switch (position.placement) {
-      case "top":
-      case "top-start":
-      case "top-end":
-        return `bottom: -${arrowRef.offsetWidth}px;filter: drop-shadow(-1px -2px 1px rgba(0,0,0,0.2));transform:translate(0, -50%) rotate(135deg);`;
-      case "right":
-      case "right-start":
-      case "right-end":
-        return `left: -${arrowRef.offsetWidth}px;transform:translate(50%, 0) rotate(225deg);`;
-      case "bottom":
-      case "bottom-start":
-      case "bottom-end":
-        return `top: -${arrowRef.offsetWidth}px;transform:translate(0, 50%) rotate(-45deg);`;
-      case "left":
-      case "left-start":
-      case "left-end":
-        return `right: -${arrowRef.offsetWidth}px;filter: drop-shadow(2px 2px 1px rgba(0,0,0,0.2));transform:translate(-50%, 0) rotate(45deg);`;
+    if (position?.placement && arrowRef) {
+        switch (position.placement) {
+            case 'top':
+            case 'top-start':
+            case 'top-end':
+                return (`bottom: -${arrowRef.offsetWidth}px;` +
+                    `filter: drop-shadow(-1px -2px 1px rgba(0,0,0,0.2));` +
+                    `transform:translate(0, -50%) rotate(135deg);`);
+            case 'right':
+            case 'right-start':
+            case 'right-end':
+                return (`left: -${arrowRef.offsetWidth}px;` + `transform:translate(50%, 0) rotate(225deg);`);
+            case 'bottom':
+            case 'bottom-start':
+            case 'bottom-end':
+                return `top: -${arrowRef.offsetWidth}px;` + `transform:translate(0, 50%) rotate(-45deg);`;
+            case 'left':
+            case 'left-start':
+            case 'left-end':
+                return (`right: -${arrowRef.offsetWidth}px;` +
+                    `filter: drop-shadow(2px 2px 1px rgba(0,0,0,0.2));` +
+                    `transform:translate(-50%, 0) rotate(45deg);`);
+        }
     }
-  }
-  return "";
+    return '';
 };
 const getArrowOffsetStyle = (position) => {
-  const arrow2 = position?.middlewareData?.arrow;
-  if (arrow2) {
-    if (arrow2.x !== null && arrow2.x !== void 0) {
-      return `left: ${arrow2.x}px;`;
-    } else if (arrow2.y !== null && arrow2.y !== void 0) {
-      return `top: ${arrow2.y}px;`;
+    const arrow = position?.middlewareData?.arrow;
+    if (arrow) {
+        if (arrow.x !== null && arrow.x !== undefined) {
+            return `left: ${arrow.x}px;`;
+        }
+        else if (arrow.y !== null && arrow.y !== undefined) {
+            return `top: ${arrow.y}px;`;
+        }
     }
-  }
-  return "";
+    return '';
 };
-$:
-  arrowStyle = getArrowPlacementStyle(popupPosition) + getArrowOffsetStyle(popupPosition);
+$: arrowStyle = getArrowPlacementStyle(popupPosition) + getArrowOffsetStyle(popupPosition);
+// ----- Animation ----- //
 const fadeNoOp = (node, params) => {
-  return { delay: 0, duration: 0 };
+    return { delay: 0, duration: 0 };
 };
-$:
-  fadeMotion = !$prefersReducedMotion ? fade : fadeNoOp;
+$: fadeMotion = !$prefersReducedMotion ? fade : fadeNoOp;
+// ----- EventHandlers ----- //
 onMount(() => {
-  ensurePortalHost();
-  resizeObserver.observe(document.body);
-  return () => {
-    resizeObserver.unobserve(document.body);
-  };
+    ensurePortalHost();
+    // start observing a DOM node
+    resizeObserver.observe(document.body);
+    return () => {
+        resizeObserver.unobserve(document.body);
+    };
 });
 const onKeydown = (event) => {
-  if (event.key === "Escape") {
-    open = false;
-  }
+    if (event.key === 'Escape') {
+        open = false;
+    }
 };
 ensurePortalHost();
 </script>
@@ -132,11 +144,12 @@ ensurePortalHost();
     class="sterling-callout-portal"
     transition:fadeMotion|global={{ duration: 250 }}
   >
+    <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
     <div
       bind:this={popupRef}
-      class="sterling-callout"
+      class={`sterling-callout ${variant}`}
       class:open
-      class:colorful
+      role="tooltip"
       on:blur
       on:click
       on:copy
@@ -173,55 +186,3 @@ ensurePortalHost();
     </div>
   </div>
 {/if}
-
-<style>
-  .sterling-callout-portal {
-    position: relative;
-    overflow: visible;
-  }
-
-  .sterling-callout {
-    background-color: var(--stsv-common__background-color);
-    border-color: var(--stsv-common__border-color);
-    border-radius: var(--stsv-common__border-radius);
-    border-style: var(--stsv-common__border-style);
-    border-width: var(--stsv-common__border-width);
-    box-shadow: rgba(0, 0, 0, 0.4) 2px 2px 4px -1px;
-    box-sizing: border-box;
-    color: var(--stsv-common__color);
-    display: none;
-    grid-template-columns: 1fr;
-    grid-template-rows: 1fr;
-    height: fit-content;
-    left: 0;
-    overflow: visible;
-    position: absolute;
-    top: 0;
-    width: max-content;
-    z-index: 0;
-  }
-
-  .sterling-callout.open {
-    display: grid;
-  }
-
-  .sterling-callout.colorful {
-    background-color: var(--stsv-button--colorful__background-color);
-    border-color: var(--stsv-button--colorful__border-color);
-    color: var(--stsv-button--colorful__color);
-  }
-
-  .arrow {
-    position: absolute;
-    box-sizing: border-box;
-    width: 14px;
-    height: 14px;
-    background-color: inherit;
-    border-color: inherit;
-    border-style: inherit;
-    border-width: inherit;
-    /* This clip path clips 1/2 the square to create a triangle */
-    /* The -100% and 200% allow for the drop-shadow to not be clipped */
-    clip-path: polygon(-100% -100%, 200% -100%, 200% 200%, -100% -100%);
-  }
-</style>

package/Callout.svelte.d.ts

@@ -2,7 +2,6 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        colorful?: boolean | undefined;
         conditionalRender?: boolean | undefined;
         crossAxisOffset?: number | undefined;
         mainAxisOffset?: number | undefined;
@@ -10,6 +9,7 @@ declare const __propDef: {
         placement?: string | undefined;
         portalHost?: HTMLElement | undefined;
         reference: HTMLElement | undefined;
+        variant?: string | undefined;
     };
     events: {
         blur: FocusEvent;