@studiocms/ui 0.0.1 → 0.3.0

package/src/components/ThemeToggle.astro

@@ -1,13 +1,12 @@
 ---
-import type { ComponentProps } from "astro/types";
-import Button from "./Button.astro";
+import Button, { type Props as ButtonProps } from './Button.astro';
 
-interface Props extends ComponentProps<typeof Button> {};
+interface Props extends ButtonProps {}
 
 const props = Astro.props;
 ---
 
-<Button id='sui__theme-toggle' {...props}>
+<Button id='sui-theme-toggle' {...props}>
   <div id="dark-content">
     <slot name="dark" />
   </div>
@@ -19,22 +18,29 @@ const props = Astro.props;
 <script>
   import { ThemeHelper } from '../utils/ThemeHelper';
 
-  const themeToggle = document.getElementById('sui__theme-toggle');
+  const themeToggle = document.getElementById('sui-theme-toggle');
   const themeHelper = new ThemeHelper();
   
   themeHelper.registerToggle(themeToggle);
 </script>
 
 <style is:global>
-  #sui__theme-toggle #dark-content, #sui__theme-toggle #light-content {
+  #sui-theme-toggle, #sui-theme-toggle * {
+    color: hsl(var(--text-normal));
+  }
+
+  #sui-theme-toggle #dark-content, #sui-theme-toggle #light-content {
     display: none;
+    width: fit-content;
+    height: fit-content;
+    max-height: 100%;
   }
 
-  [data-theme="dark"] #sui__theme-toggle #dark-content {
+  [data-theme="dark"] #sui-theme-toggle #dark-content {
     display: block;
   }
 
-  [data-theme="light"] #sui__theme-toggle #light-content {
+  [data-theme="light"] #sui-theme-toggle #light-content {
     display: block;
   }
 </style>

package/src/components/Toast/Toaster.astro

@@ -1,5 +1,11 @@
 ---
+/**
+ * Props for the Toast component.
+ */
 interface Props {
+	/**
+	 * The position of the toaster. All toasts will originate from this position.
+	 */
 	position?:
 		| 'top-left'
 		| 'top-right'
@@ -7,11 +13,23 @@ interface Props {
 		| 'bottom-left'
 		| 'bottom-right'
 		| 'bottom-center';
+	/**
+	 * The duration of the toast in milliseconds. Defaults to 4000 (4 seconds).
+	 */
 	duration?: number;
+	/**
+	 * Whether the toast has a close button. Defaults to false.
+	 */
 	closeButton?: boolean;
+	/**
+	 * The offset of the toaster from the edge of the screen in pixels. Defaults to 32.
+	 */
 	offset?: number;
+	/**
+	 * The gap between toasts in pixels. Defaults to 8.
+	 */
 	gap?: number;
-};
+}
 
 const {
 	position = 'top-center',
@@ -22,14 +40,14 @@ const {
 } = Astro.props;
 ---
 <div 
-  id="toaster" 
+  id="sui-toaster" 
   class:list={[
     closeButton && "closeable",
     position,
   ]},
 >
   <div 
-    id="toast-drawer"
+    id="sui-toast-drawer"
     data-offset={offset}
     data-gap={gap}
     data-duration={duration}
@@ -53,6 +71,65 @@ const {
 
   let activeToasts: string[] = [];
 
+  let lastActiveElement: HTMLElement | null = null;
+
+  const revertFocusBackToLastActiveElement = () => {
+    if (lastActiveElement) {
+      lastActiveElement.focus();
+      lastActiveElement = null;
+    }
+  };
+
+  /**
+   * Callback wrapper that allows for pausing, continuing and clearing a timer. Based on https://stackoverflow.com/a/20745721.
+   * @param callback The callback to be called.
+   * @param delay The delay in milliseconds.
+   */
+  class Timer {
+    private id: NodeJS.Timeout | null;
+    private started: Date | null;
+    private remaining: number;
+    private running: boolean;
+    private callback: () => any;
+
+    constructor(callback: () => any, delay: number) {
+      this.id = null;
+      this.started = null;
+      this.remaining = delay;
+      this.running = false;
+      this.callback = callback;
+
+      this.start();
+    }
+
+    start = () => {
+      this.running = true;
+      this.started = new Date();
+      this.id = setTimeout(this.callback, this.remaining);
+    };
+
+    pause = () => {
+      if (!this.id || !this.started || !this.running) return;
+
+      this.running = false;
+      clearTimeout(this.id);
+      this.remaining -= new Date().getTime() - this.started.getTime();
+    };
+
+    getTimeLeft = () => {
+      if (this.running) {
+        this.pause();
+        this.start();
+      }
+
+      return this.remaining;
+    };
+
+    getStateRunning = () => {
+      return this.running;
+    };
+  }
+
   function removeToast(toastID: string) {
     const toastEl = document.getElementById(toastID);
 
@@ -66,22 +143,26 @@ const {
   }
 
   function createToast(props: ToastProps) {
-    const toastParent = document.getElementById('toast-drawer')! as HTMLDivElement;
+    const toastParent = document.getElementById('sui-toast-drawer')! as HTMLDivElement;
     
     const toastContainer = document.createElement('div');
     const toastID = generateID('toast');
+    toastContainer.tabIndex = 0;
+    toastContainer.ariaLive = 'polite';
+    toastContainer.role = 'alert';
     toastContainer.id = toastID;
-    toastContainer.classList.add('toast-container', props.type, `${props.closeButton || props.persistent && "closeable"}`, `${props.persistent && 'persistent'}`);
+    toastContainer.ariaLabel = `${props.title} (F8)`;
+    toastContainer.classList.add('sui-toast-container', props.type, `${props.closeButton || props.persistent && "closeable"}`, `${props.persistent && 'persistent'}`);
 
     const toastHeader = document.createElement('div');
-    toastHeader.classList.add('toast-header');
+    toastHeader.classList.add('sui-toast-header');
 
     const toastHeaderLeftSide = document.createElement('div');
-    toastHeaderLeftSide.classList.add('toast-header-left-side')
+    toastHeaderLeftSide.classList.add('sui-toast-header-left-side')
     
     const toastTitle = document.createElement('span');
     toastTitle.textContent = props.title;
-    toastTitle.classList.add('toast-title');
+    toastTitle.classList.add('sui-toast-title');
 
     let iconString: ValidIconString;
 
@@ -106,6 +187,8 @@ const {
       closeIconContainer.classList.add('close-icon-container');
       closeIconContainer.addEventListener('click', () => removeToast(toastID));
       closeIconContainer.innerHTML = getIconString('x-mark', 'close-icon', 24, 24);
+      closeIconContainer.tabIndex = 0;
+      closeIconContainer.ariaLabel = 'Close toast';
 
       toastHeader.appendChild(closeIconContainer);
     }
@@ -115,14 +198,14 @@ const {
     if (props.description) {
       const toastDesc = document.createElement('span');
       toastDesc.innerHTML = props.description;
-      toastDesc.classList.add('toast-desc');
+      toastDesc.classList.add('sui-toast-desc');
 
       toastContainer.appendChild(toastDesc);
     }
 
     if (!props.persistent) {
       const toastProgressBar = document.createElement('div');
-      toastProgressBar.classList.add('toast-progress-bar');
+      toastProgressBar.classList.add('sui-toast-progress-bar');
       toastProgressBar.style.animationDuration = props.duration ? `${props.duration}ms` : `${toastParent.dataset.duration || 4000}ms`;
 
       toastContainer.appendChild(toastProgressBar);
@@ -133,11 +216,43 @@ const {
     activeToasts.push(toastID);
 
     if (!props.persistent) {
-      setTimeout(
+      let timer = new Timer(
         () => removeToast(toastID),
         props.duration || (toastParent.dataset.duration ? parseInt(toastParent.dataset.duration) : 4000)
       );
+
+      const timerPauseWrapper = () => {
+        toastContainer.classList.add('paused');
+        timer.pause();
+      };
+
+      const timerStartWrapper = () => {
+        toastContainer.classList.remove('paused');
+        timer.start();
+      };
+
+      toastContainer.addEventListener('mouseenter', timerPauseWrapper);
+      toastContainer.addEventListener('focusin', timerPauseWrapper);
+
+      toastContainer.addEventListener('mouseleave', timerStartWrapper);
+      toastContainer.addEventListener('focusout', () => {
+        let focusedOrHasFocused = toastContainer.matches(':focus-within');
+
+        if (!focusedOrHasFocused) {
+          revertFocusBackToLastActiveElement();
+        }
+
+        timerStartWrapper();
+      });
     }
+
+    toastContainer.addEventListener('keydown', (e) => {
+      if (e.key === 'Escape') {
+        e.preventDefault();
+        removeToast(toastID);
+        revertFocusBackToLastActiveElement();
+      }
+    });
   }
 
   document.addEventListener('createtoast', (e) => {
@@ -147,9 +262,24 @@ const {
     
     createToast(event.detail);
   });
+
+  window.addEventListener('keydown', (e) => {
+    if (e.key === 'F8') {
+      e.preventDefault();
+
+      const oldestToast = activeToasts[0];
+
+      if (oldestToast) {
+        lastActiveElement = document.activeElement as HTMLElement;
+
+        const toastEl = document.getElementById(oldestToast);
+        if (toastEl) toastEl?.focus();
+      }
+    }
+  });
 </script>
 <style>
-  #toaster {
+  #sui-toaster {
     width: 100vw;
     height: 100vh;
     position: fixed;
@@ -157,9 +287,10 @@ const {
     left: 0;
     z-index: 100;
     pointer-events: none;
+    color: hsl(var(--text-normal));
   }
 
-  #toast-drawer {
+  #sui-toast-drawer {
     max-width: 420px;
     width: 100%;
     height: fit-content;
@@ -168,14 +299,14 @@ const {
     flex-direction: column;
   }
 
-  #toaster.top-left #toast-drawer,
-  #toaster.bottom-left #toast-drawer {
+  #sui-toaster.top-left #sui-toast-drawer,
+  #sui-toaster.bottom-left #sui-toast-drawer {
     left: 50%;
     transform: translateX(-50%);
   }
 </style>
 <style is:global>
-  .toast-container {
+  .sui-toast-container {
     pointer-events: all;
     padding: 1rem;
     border-radius: .5rem;
@@ -192,14 +323,14 @@ const {
     z-index: 90;
   }
 
-  .toast-header {
+  .sui-toast-header {
     display: flex;
     flex-direction: row;
     align-items: center;
     justify-content: space-between;
   }
 
-  .toast-header-left-side {
+  .sui-toast-header-left-side {
     display: flex;
     flex-direction: row;
     gap: .5rem;
@@ -208,23 +339,23 @@ const {
     font-size: 1.125em;
   }
 
-  .toast-header-left-side svg {
+  .sui-toast-header-left-side svg {
     color: hsl(var(--primary-base));
   }
 
-  .toast-container.success .toast-header-left-side svg {
+  .sui-toast-container.success .sui-toast-header-left-side svg {
     color: hsl(var(--success-base));
   }
 
-  .toast-container.warning .toast-header-left-side svg {
+  .sui-toast-container.warning .sui-toast-header-left-side svg {
     color: hsl(var(--warning-base));
   }
 
-  .toast-container.danger .toast-header-left-side svg {
+  .sui-toast-container.danger .sui-toast-header-left-side svg {
     color: hsl(var(--danger-base));
   }
 
-  .toast-progress-bar {
+  .sui-toast-progress-bar {
     position: absolute;
     height: 4px;
     width: 100%;
@@ -234,15 +365,19 @@ const {
     animation: toast-progress forwards linear;
   }
 
-  .toast-container.success .toast-progress-bar {
+  .sui-toast-container.paused .sui-toast-progress-bar {
+    animation-play-state: paused;
+  }
+
+  .sui-toast-container.success .sui-toast-progress-bar {
     background-color: hsl(var(--success-base));
   }
 
-  .toast-container.warning .toast-progress-bar {
+  .sui-toast-container.warning .sui-toast-progress-bar {
     background-color: hsl(var(--warning-base));
   }
 
-  .toast-container.danger .toast-progress-bar {
+  .sui-toast-container.danger .sui-toast-progress-bar {
     background-color: hsl(var(--danger-base));
   }
 
@@ -261,23 +396,28 @@ const {
     background-color: hsl(var(--default-base));
   }
 
-  .toast-container.closing {
+  .close-icon-container:focus-visible {
+    outline: 2px solid hsl(var(--text-normal));
+    outline-offset: 2px;
+  }
+
+  .sui-toast-container.closing {
     animation: toast-closing .25s ease forwards;
   }
 
-  .toast-container.persistent {
+  .sui-toast-container.persistent {
     border: 1px solid hsl(var(--primary-base));
   }
 
-  .toast-container.persistent.success {
+  .sui-toast-container.persistent.success {
     border: 1px solid hsl(var(--success-base));
   }
 
-  .toast-container.persistent.warning {
+  .sui-toast-container.persistent.warning {
     border: 1px solid hsl(var(--warning-base));
   }
 
-  .toast-container.persistent.danger {
+  .sui-toast-container.persistent.danger {
     border: 1px solid hsl(var(--danger-base));
   }
 

package/src/components/Toggle.astro

@@ -2,15 +2,39 @@
 import type { StudioCMSColorway } from '../utils/colors';
 import { generateID } from '../utils/generateID';
 
+/**
+ * The props for the toggle component
+ */
 interface Props {
+	/**
+	 * The label of the toggle.
+	 */
 	label: string;
+	/**
+	 * The size of the toggle. Defaults to `md`.
+	 */
 	size?: 'sm' | 'md' | 'lg';
+	/**
+	 * The color of the toggle. Defaults to `default`.
+	 */
 	color?: StudioCMSColorway;
+	/**
+	 * Whether the toggle is checked by default. Defaults to `false`.
+	 */
 	defaultChecked?: boolean;
+	/**
+	 * Whether the toggle is disabled. Defaults to `false`.
+	 */
 	disabled?: boolean;
+	/**
+	 * The name of the toggle.
+	 */
 	name?: string;
+	/**
+	 * Whether the toggle is required. Defaults to `false`.
+	 */
 	isRequired?: boolean;
-};
+}
 
 const {
 	size = 'md',
@@ -23,7 +47,7 @@ const {
 } = Astro.props;
 ---
 <label
-  class="toggle-label"
+  class="sui-toggle-label"
   for={name}
   class:list={[
     disabled && "disabled",
@@ -31,8 +55,14 @@ const {
     size,
   ]}
 >
-  <div class="toggle-container">
-    <div class="toggle-switch" />
+  <div class="sui-toggle-container">
+    <div 
+      class="sui-toggle-switch"
+      tabindex="0"
+      role="checkbox"
+      aria-checked={defaultChecked}
+      aria-label={label}
+    />
     <input
       type="checkbox"
       name={name}
@@ -40,15 +70,48 @@ const {
       checked={defaultChecked}
       disabled={disabled}
       required={isRequired}
-      class="checkbox"
+      class="sui-toggle-checkbox"
+      hidden
     />
   </div>
-  <span>
+  <span id={`label-${name}`}>
     {label} <span class="req-star">{isRequired && "*"}</span>
   </span>
 </label>
+<script>
+  const elements = document.querySelectorAll<HTMLDivElement>('.sui-toggle-container');
+  const toggles = document.querySelectorAll<HTMLInputElement>('.sui-toggle-checkbox');
+
+  for (const element of elements) {
+    if (element.dataset.initialized) continue;
+    
+    element.dataset.initialized = 'true';
+
+    element.addEventListener('keydown', (e) => {
+      if (e.key !== 'Enter' && e.key !== ' ') return;
+
+      e.preventDefault();
+
+      const checkbox = element.querySelector<HTMLInputElement>('.sui-toggle-checkbox');
+        
+      if (!checkbox) return;
+
+      checkbox.click();
+    });
+  }
+
+  for (const box of toggles) {
+    if (box.dataset.initialized) continue;
+
+    box.dataset.initialized = 'true';
+
+    box.addEventListener('change', (e) => {
+      (box.previousSibling as HTMLDivElement).ariaChecked = (e.target as HTMLInputElement).checked ? 'true' : 'false';
+    });
+  }
+</script>
 <style>
-  .toggle-label {
+  .sui-toggle-label {
     display: flex;
     flex-direction: row;
     align-items: center;
@@ -57,17 +120,17 @@ const {
     margin: .25rem 0;
   }
 
-  .toggle-label.disabled {
+  .sui-toggle-label.disabled {
     opacity: 0.5;
     pointer-events: none;
     color: hsl(var(--text-muted));
   }
 
-  .toggle-label:active .toggle-switch {
+  .sui-toggle-label:active .sui-toggle-switch {
     transform: scale(0.85);
   }
 
-  .toggle-container {
+  .sui-toggle-container {
     --toggle-height: 12px;
     --toggle-width: 40px;
     display: flex;
@@ -80,7 +143,7 @@ const {
     border-radius: var(--toggle-height);
   }
 
-  .toggle-switch {
+  .sui-toggle-switch {
     --switch: calc(var(--toggle-height) * 1.75);
     height: var(--switch);
     width: var(--switch);
@@ -92,42 +155,47 @@ const {
     will-change: transform;
   }
 
-  .toggle-container:has(.checkbox:checked) .toggle-switch {
+  .sui-toggle-switch:focus-visible {
+    outline: 2px solid hsl(var(--text-normal));
+    outline-offset: 2px;
+  }
+
+  .sui-toggle-container:has(.sui-toggle-checkbox:checked) .sui-toggle-switch {
     left: calc(100% - var(--switch));
     background-color: hsl(var(--text-normal));
   }
 
-  .toggle-label.sm .toggle-container {
+  .sui-toggle-label.sm .sui-toggle-container {
     --toggle-height: 10px;
     --toggle-width: 32px;
   }
 
-  .toggle-label.sm .toggle-switch {
+  .sui-toggle-label.sm .sui-toggle-switch {
     --switch: calc(var(--toggle-height) * 1.65);
   }
 
-  .toggle-label.lg .toggle-container {
+  .sui-toggle-label.lg .sui-toggle-container {
     --toggle-height: 16px;
     --toggle-width: 48px;
   }
 
-  .toggle-label.lg .toggle-switch {
+  .sui-toggle-label.lg .sui-toggle-switch {
     --switch: calc(var(--toggle-height) * 1.65);
   }
 
-  .toggle-label.primary .toggle-container:has(.checkbox:checked) {
+  .sui-toggle-label.primary .sui-toggle-container:has(.sui-toggle-checkbox:checked) {
     background-color: hsl(var(--primary-base));
   }
 
-  .toggle-label.success .toggle-container:has(.checkbox:checked) {
+  .sui-toggle-label.success .sui-toggle-container:has(.sui-toggle-checkbox:checked) {
     background-color: hsl(var(--success-base));
   }
 
-  .toggle-label.warning .toggle-container:has(.checkbox:checked) {
+  .sui-toggle-label.warning .sui-toggle-container:has(.sui-toggle-checkbox:checked) {
     background-color: hsl(var(--warning-base));
   }
 
-  .toggle-label.danger .toggle-container:has(.checkbox:checked) {
+  .sui-toggle-label.danger .sui-toggle-container:has(.sui-toggle-checkbox:checked) {
     background-color: hsl(var(--danger-base));
   }
 
@@ -136,7 +204,7 @@ const {
     font-weight: 700;
   }
 
-  .checkbox {
+  .sui-toggle-checkbox {
     width: 0;
     height: 0;
     visibility: hidden;