@studiocms/ui 0.4.17 → 1.0.0-beta.1

package/dist/components/Tabs/tabs.js

@@ -1,85 +1,108 @@
-function loadTabs() {
-  const allTabContainers = document.querySelectorAll(".sui-tabs-container");
-  for (const tabContainer of allTabContainers) {
-    const storage = tabContainer.dataset.storageStrategy;
-    const syncKey = tabContainer.dataset.syncKey;
+const switchTab = (tabContainer, newActiveHeader, originatedFromSync = false) => {
+  const tabHeaders = Array.from(
+    tabContainer.querySelectorAll(":scope > .sui-tabs-list > .sui-tab-header")
+  );
+  const tabPanels = Array.from(
+    tabContainer.querySelectorAll(":scope > .sui-tabs-content > sui-tab-item")
+  );
+  if (!newActiveHeader || !tabHeaders.includes(newActiveHeader)) return;
+  for (const header of tabHeaders) {
+    header.classList.remove("active");
+    header.tabIndex = -1;
+    header.setAttribute("aria-selected", "false");
+  }
+  for (const panel of tabPanels) {
+    panel.classList.remove("active");
+  }
+  newActiveHeader.classList.add("active");
+  newActiveHeader.tabIndex = 0;
+  newActiveHeader.setAttribute("aria-selected", "true");
+  const activePanel = tabPanels.find((p) => p.id === newActiveHeader.getAttribute("aria-controls"));
+  if (activePanel) {
+    activePanel.classList.add("active");
+  }
+  const syncKey = tabContainer.dataset.syncKey;
+  if (syncKey && !originatedFromSync) {
+    const storage = tabContainer.dataset.storageStrategy ?? "session";
     const storageLayer = storage === "session" ? sessionStorage : localStorage;
-    const constructCustomEvent = (tabIndex, uniqueId) => {
-      return new CustomEvent(`sui-tab-switch:${syncKey}`, {
+    const tabIndex = tabHeaders.indexOf(newActiveHeader);
+    storageLayer.setItem(syncKey, tabIndex.toString());
+    document.dispatchEvent(
+      new CustomEvent(`sui-tab-switch:${syncKey}`, {
         detail: {
           tabIndex,
-          uniqueId
-        }
-      });
-    };
-    const switchTab = (target, container, originatedFromSync = false) => {
-      const activeChildren = container.querySelectorAll(".active");
-      for (const child of activeChildren) {
-        child.tabIndex = -1;
-        child.classList.remove("active");
-      }
-      const newActiveTab = target;
-      newActiveTab.classList.add("active");
-      newActiveTab.tabIndex = 0;
-      const newActiveTabContentId = newActiveTab.dataset.tabChild;
-      const newActiveTabContent = container.querySelector(
-        `sui-tab-item[data-tab-id="${newActiveTabContentId}"]`
-      );
-      newActiveTabContent.classList.add("active");
-      if (syncKey && !originatedFromSync) {
-        const tabIndex = Array.prototype.indexOf.call(
-          newActiveTab.parentElement.children,
-          newActiveTab
-        );
-        storageLayer.setItem(syncKey, tabIndex.toString());
-        document.dispatchEvent(constructCustomEvent(tabIndex, container.dataset.uniqueId));
-      }
-    };
-    const tabHeaders = tabContainer.querySelectorAll(".sui-tab-header");
-    for (const tab of tabHeaders) {
-      tab.addEventListener("click", (e) => switchTab(e.target, tabContainer));
-      tab.addEventListener("keydown", (e) => {
-        if (e.key === "ArrowLeft" || e.key === "ArrowRight") {
-          const activeTabIndex = Array.prototype.indexOf.call(tab.parentElement.children, tab);
-          const nextTabIndex = e.key === "ArrowLeft" ? activeTabIndex - 1 : activeTabIndex + 1;
-          if (nextTabIndex >= 0 && nextTabIndex < tab.parentElement.children.length) {
-            tab.tabIndex = -1;
-            const nextTab = tab.parentElement.children[nextTabIndex];
-            nextTab.tabIndex = 0;
-            nextTab.click();
-            nextTab.focus();
-          } else if (nextTabIndex < 0) {
-            tab.tabIndex = -1;
-            const lastTab = tab.parentElement.children[tab.parentElement.children.length - 1];
-            lastTab.tabIndex = 0;
-            lastTab.click();
-            lastTab.focus();
-          } else {
-            tab.tabIndex = -1;
-            const firstTab = tab.parentElement.children[0];
-            firstTab.tabIndex = 0;
-            firstTab.click();
-            firstTab.focus();
-          }
+          uniqueId: tabContainer.dataset.uniqueId
         }
-      });
+      })
+    );
+  }
+};
+const setupTabContainer = (tabContainer) => {
+  const tabHeaders = Array.from(
+    tabContainer.querySelectorAll(":scope > .sui-tabs-list > .sui-tab-header")
+  );
+  const tabPanels = Array.from(
+    tabContainer.querySelectorAll(":scope > .sui-tabs-content > sui-tab-item")
+  );
+  const tabList = tabContainer.querySelector(":scope > .sui-tabs-list");
+  if (!tabHeaders.length || !tabPanels.length || !tabList) return;
+  tabHeaders.forEach((header, index) => {
+    const panel = tabPanels[index];
+    if (!panel) return;
+    const panelId = panel.dataset.tabId ?? `sui-panel-${crypto.randomUUID()}`;
+    const headerId = header.id || `sui-header-${crypto.randomUUID()}`;
+    header.id = headerId;
+    panel.id = panelId;
+    panel.setAttribute("role", "tabpanel");
+    panel.setAttribute("aria-labelledby", headerId);
+    header.setAttribute("aria-controls", panelId);
+  });
+  tabList.addEventListener("click", (e) => {
+    const header = e.target.closest(".sui-tab-header");
+    if (header && tabHeaders.includes(header)) {
+      switchTab(tabContainer, header);
     }
-    if (syncKey) {
-      const activeTabIndex = storageLayer.getItem(syncKey);
-      if (activeTabIndex) {
-        const activeTab = tabContainer.querySelector(`#${syncKey}-${activeTabIndex}`);
-        if (activeTab) {
-          activeTab.click();
-        }
+  });
+  tabList.addEventListener("keydown", (e) => {
+    if (e.key !== "ArrowLeft" && e.key !== "ArrowRight") return;
+    const currentHeader = e.target.closest(".sui-tab-header");
+    if (!currentHeader || !tabHeaders.includes(currentHeader)) return;
+    e.preventDefault();
+    const currentIndex = tabHeaders.indexOf(currentHeader);
+    const newIndex = e.key === "ArrowLeft" ? (currentIndex - 1 + tabHeaders.length) % tabHeaders.length : (currentIndex + 1) % tabHeaders.length;
+    const nextTab = tabHeaders[newIndex];
+    nextTab.focus();
+    switchTab(tabContainer, nextTab);
+  });
+  const syncKey = tabContainer.dataset.syncKey;
+  const initiallyActiveTab = tabHeaders.find((h) => h.classList.contains("active")) ?? tabHeaders[0];
+  if (syncKey) {
+    const storage = tabContainer.dataset.storageStrategy ?? "session";
+    const storageLayer = storage === "session" ? sessionStorage : localStorage;
+    const activeTabIndex = storageLayer.getItem(syncKey);
+    if (activeTabIndex) {
+      const activeTab = tabHeaders[Number.parseInt(activeTabIndex, 10)];
+      if (activeTab) {
+        switchTab(tabContainer, activeTab);
       }
-      document.addEventListener(`sui-tab-switch:${syncKey}`, (e) => {
-        const event = e;
-        const { tabIndex, uniqueId } = event.detail;
-        if (uniqueId === tabContainer.dataset.uniqueId) return;
-        const newTab = tabContainer.querySelector(`#${syncKey}-${tabIndex}`);
-        switchTab(newTab, tabContainer, true);
-      });
+    } else {
+      switchTab(tabContainer, initiallyActiveTab);
     }
+    document.addEventListener(`sui-tab-switch:${syncKey}`, (e) => {
+      const { tabIndex, uniqueId } = e.detail;
+      if (uniqueId === tabContainer.dataset.uniqueId) return;
+      const newTab = tabHeaders[tabIndex];
+      if (newTab) {
+        switchTab(tabContainer, newTab, true);
+      }
+    });
+  } else {
+    switchTab(tabContainer, initiallyActiveTab);
+  }
+};
+const loadTabs = () => {
+  for (const tabContainer of document.querySelectorAll(".sui-tabs-container")) {
+    setupTabContainer(tabContainer);
   }
-}
+};
 document.addEventListener("astro:page-load", loadTabs);

package/dist/components/Textarea/textarea.css

@@ -7,7 +7,7 @@
 .sui-textarea-label.disabled {
   opacity: 0.5;
   pointer-events: none;
-  color: hsl(var(--text-muted));
+  color: var(--text-muted);
 }
 .sui-textarea-label.full-width {
   width: 100%;
@@ -22,9 +22,9 @@
 .sui-textarea {
   padding: .65rem;
   border-radius: var(--radius-md);
-  border: 1px solid hsl(var(--border));
-  background: hsl(var(--background-step-2));
-  color: hsl(var(--text-normal));
+  border: 1px solid var(--border);
+  background: var(--background-step-2);
+  color: var(--text-normal);
   transition: all .15s ease;
   resize: none;
   min-height: 12ch;
@@ -32,18 +32,18 @@
   height: 100%;
 }
 .sui-textarea:hover {
-  background: hsl(var(--background-step-3));
+  background: var(--background-step-3);
 }
 .resize .sui-textarea {
   resize: both;
 }
 .sui-textarea:active,
 .sui-textarea:focus {
-  border: 1px solid hsl(var(--primary-base));
+  border: 1px solid var(--primary-base);
   outline: none;
-  background: hsl(var(--background-step-2));
+  background: var(--background-step-2);
 }
 .req-star {
-  color: hsl(var(--danger-base));
+  color: var(--danger-base);
   font-weight: 700;
 }

package/dist/components/Toast/toaster.css

@@ -6,7 +6,7 @@
   left: 0;
   z-index: 100;
   pointer-events: none;
-  color: hsl(var(--text-normal));
+  color: var(--text-normal);
 }
 #sui-toast-drawer {
   max-width: 420px;
@@ -25,9 +25,9 @@
   pointer-events: all;
   padding: 1rem;
   border-radius: var(--radius-md);
-  border: 1px solid hsl(var(--border));
-  background-color: hsl(var(--background-base));
-  box-shadow: 0px 4px 8px hsl(var(--shadow), 0.5);
+  border: 1px solid var(--border);
+  background-color: var(--background-base);
+  box-shadow: 0px 4px 8px var(--shadow);
   display: flex;
   flex-direction: column;
   gap: .5rem;
@@ -52,22 +52,22 @@
   font-size: 1.125em;
 }
 .sui-toast-header-left-side svg {
-  color: hsl(var(--primary-base));
+  color: var(--primary-base);
 }
 .sui-toast-container.success .sui-toast-header-left-side svg {
-  color: hsl(var(--success-base));
+  color: var(--success-base);
 }
 .sui-toast-container.warning .sui-toast-header-left-side svg {
-  color: hsl(var(--warning-base));
+  color: var(--warning-base);
 }
 .sui-toast-container.danger .sui-toast-header-left-side svg {
-  color: hsl(var(--danger-base));
+  color: var(--danger-base);
 }
 .sui-toast-container.info .sui-toast-header-left-side svg {
-  color: hsl(var(--info-base));
+  color: var(--info-base);
 }
 .sui-toast-container.mono .sui-toast-header-left-side svg {
-  color: hsl(var(--mono-base));
+  color: var(--mono-base);
 }
 .sui-toast-progress-bar {
   position: absolute;
@@ -75,20 +75,23 @@
   width: 100%;
   bottom: 0;
   left: 0%;
-  background-color: hsl(var(--primary-base));
+  background-color: var(--primary-base);
   animation: toast-progress forwards linear;
 }
 .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));
+  background-color: var(--success-base);
 }
 .sui-toast-container.warning .sui-toast-progress-bar {
-  background-color: hsl(var(--warning-base));
+  background-color: var(--warning-base);
 }
 .sui-toast-container.danger .sui-toast-progress-bar {
-  background-color: hsl(var(--danger-base));
+  background-color: var(--danger-base);
+}
+.sui-toast-container.info .sui-toast-progress-bar {
+  background-color: var(--info-base);
 }
 .close-icon-container {
   cursor: pointer;
@@ -101,26 +104,26 @@
   border-radius: var(--radius-sm);
 }
 .close-icon-container:hover {
-  background-color: hsl(var(--default-base));
+  background-color: var(--default-base);
 }
 .close-icon-container:focus-visible {
-  outline: 2px solid hsl(var(--text-normal));
+  outline: 2px solid var(--text-normal);
   outline-offset: 2px;
 }
 .sui-toast-container.closing {
   animation: toast-closing .25s ease forwards;
 }
 .sui-toast-container.persistent {
-  border: 1px solid hsl(var(--primary-base));
+  border: 1px solid var(--primary-base);
 }
 .sui-toast-container.persistent.success {
-  border: 1px solid hsl(var(--success-base));
+  border: 1px solid var(--success-base);
 }
 .sui-toast-container.persistent.warning {
-  border: 1px solid hsl(var(--warning-base));
+  border: 1px solid var(--warning-base);
 }
 .sui-toast-container.persistent.danger {
-  border: 1px solid hsl(var(--danger-base));
+  border: 1px solid var(--danger-base);
 }
 @keyframes toast-pop-in {
   0% {
@@ -139,7 +142,7 @@
     max-height: 500px;
     margin-bottom: var(--gap);
     padding: 1rem;
-    border: 1px solid hsl(var(--border));
+    border: 1px solid var(--border);
   }
   62.5% {
     scale: 0.75;
@@ -147,7 +150,7 @@
     max-height: 500px;
     margin-bottom: var(--gap);
     padding: 1rem;
-    border: 1px solid hsl(var(--border));
+    border: 1px solid var(--border);
   }
   100% {
     scale: 0.75;
@@ -155,7 +158,7 @@
     max-height: 0px;
     margin-bottom: 0;
     padding: 0;
-    border: 0px solid hsl(var(--border));
+    border: 0px solid var(--border);
   }
 }
 @keyframes toast-progress {

package/dist/components/Toast/toaster.js

@@ -75,12 +75,16 @@ function createToast(props) {
   let iconString;
   if (props.type === "success") {
     iconString = "check-circle";
+    toastContainer.classList.add("success");
   } else if (props.type === "danger") {
     iconString = "exclamation-circle";
+    toastContainer.classList.add("danger");
   } else if (props.type === "warning") {
     iconString = "exclamation-triangle";
+    toastContainer.classList.add("warning");
   } else {
     iconString = "information-circle";
+    toastContainer.classList.add("info");
   }
   const toastIcon = getIconString(iconString, "toast-icon", 24, 24);
   toastHeaderLeftSide.innerHTML = toastIcon;

package/dist/components/Toggle/toggle.css

@@ -9,7 +9,7 @@
 .sui-toggle-label.disabled {
   opacity: 0.5;
   pointer-events: none;
-  color: hsl(var(--text-muted));
+  color: var(--text-muted);
 }
 .sui-toggle-label:active .sui-toggle-switch {
   transform: scale(0.85);
@@ -21,7 +21,7 @@
   align-items: center;
   cursor: pointer;
   transition: all .15s ease;
-  background-color: hsl(var(--default-base));
+  background-color: var(--default-base);
   width: var(--toggle-width);
   height: var(--toggle-height);
   border-radius: var(--radius-full);
@@ -30,7 +30,7 @@
   --switch: calc(var(--toggle-height) * 1.75);
   height: var(--switch);
   width: var(--switch);
-  background-color: hsl(var(--text-muted));
+  background-color: var(--text-muted);
   border-radius: var(--radius-full);
   position: relative;
   left: 0;
@@ -38,12 +38,12 @@
   will-change: transform;
 }
 .sui-toggle-switch:focus-visible {
-  outline: 2px solid hsl(var(--text-normal));
+  outline: 2px solid 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));
+  background-color: var(--text-normal);
 }
 .sui-toggle-label.sm .sui-toggle-container {
   --toggle-height: 10px;
@@ -60,28 +60,28 @@
   --switch: calc(var(--toggle-height) * 1.65);
 }
 .sui-toggle-label.primary .sui-toggle-container:has(.sui-toggle-checkbox:checked) {
-  background-color: hsl(var(--primary-base));
+  background-color: var(--primary-base);
 }
 .sui-toggle-label.success .sui-toggle-container:has(.sui-toggle-checkbox:checked) {
-  background-color: hsl(var(--success-base));
+  background-color: var(--success-base);
 }
 .sui-toggle-label.warning .sui-toggle-container:has(.sui-toggle-checkbox:checked) {
-  background-color: hsl(var(--warning-base));
+  background-color: var(--warning-base);
 }
 .sui-toggle-label.danger .sui-toggle-container:has(.sui-toggle-checkbox:checked) {
-  background-color: hsl(var(--danger-base));
+  background-color: var(--danger-base);
 }
 .sui-toggle-label.info .sui-toggle-container:has(.sui-toggle-checkbox:checked) {
-  background-color: hsl(var(--info-base));
+  background-color: var(--info-base);
 }
 .sui-toggle-label.mono .sui-toggle-container:has(.sui-toggle-checkbox:checked) {
-  background-color: hsl(var(--mono-base));
+  background-color: var(--mono-base);
 }
 .sui-toggle-label.mono .sui-toggle-switch {
-  border: 1px solid hsl(var(--text-inverted));
+  border: 1px solid var(--text-inverted);
 }
 .req-star {
-  color: hsl(var(--danger-base));
+  color: var(--danger-base);
   font-weight: 700;
 }
 .sui-toggle-checkbox {

package/dist/components/Tooltip/Tooltip.astro

@@ -0,0 +1,119 @@
+---
+import './tooltip.css';
+import type { HTMLAttributes } from 'astro/types';
+
+interface Props extends Omit<HTMLAttributes<'div'>, 'class:list'> {
+	/**
+	 * The position of the tooltip. Defaults to 'auto'.
+	 *
+	 * 'auto' will try to position below, then above, then right, then left.
+	 */
+	position?: 'auto' | 'top' | 'bottom' | 'left' | 'right';
+
+	/**
+	 * Whether the tooltip should be opened by default. Defaults to false.
+	 */
+	defaultOpen?: boolean;
+
+	/**
+	 * Whether the tooltip should be inline with the anchor element. Defaults to false.
+	 *
+	 * @todo This is not fully working, due to an Astro bug: https://github.com/withastro/astro/issues/13970
+	 *
+	 * USE AT YOUR OWN RISK!
+	 */
+	inline?: boolean;
+
+	/**
+	 * The variant of the tooltip. Defaults to 'default'.
+	 */
+	variant?: 'default' | 'outlined';
+
+	/**
+	 * The color of the tooltip. Defaults to 'default'.
+	 */
+	color?: 'default' | 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'mono';
+
+	/**
+	 * The gap between the tooltip and the anchor element in pixels. Defaults to 8.
+	 */
+	gap?: number;
+
+	/**
+	 * The delay before the tooltip appears in milliseconds. Defaults to 0.
+	 */
+	enterDelay?: number;
+
+	/**
+	 * The delay before the tooltip disappears in milliseconds. Defaults to 0.
+	 */
+	exitDelay?: number;
+
+	/**
+	 * Whether the tooltip should be hover only. Defaults to false.
+	 *
+	 * By default, the tooltip will show on mouse hover and click (for mobile support).
+	 */
+	hoverOnly?: boolean;
+
+	/**
+	 * Whether the tooltip should animate a fade in and out. Defaults to true.
+	 */
+	animate?: boolean;
+
+	/**
+	 * Render a triangle pointer on the tooltip. Defaults to true.
+	 */
+	pointer?: boolean;
+}
+
+const {
+	position = 'auto',
+	defaultOpen = false,
+	inline = false,
+	variant = 'default',
+	color = 'default',
+	gap = 8,
+	enterDelay = 0,
+	exitDelay = 0,
+	hoverOnly = false,
+	animate = true,
+	pointer = true,
+	...others
+} = Astro.props;
+---
+
+<div
+  class:list={["sui-tooltip-container", inline && "inline"]}
+  data-sui-tooltip
+  data-sui-tooltip-options={JSON.stringify({
+    position,
+    defaultOpen,
+    gap,
+    enterDelay,
+    exitDelay,
+    hoverOnly,
+    animate,
+    pointer,
+  })}
+  {...others}
+>
+  <div class="sui-tooltip-anchor-wrapper" data-sui-tooltip-anchor>
+    <slot />
+  </div>
+  <div
+    class={`sui-tooltip-popup color-${color} variant-${variant}`}
+    class:list={[animate && "animate"]}
+    data-sui-tooltip-popup
+    role="tooltip"
+  >
+    {pointer && <div class="sui-tooltip-pointer" />}
+    <slot name="tooltip">
+      <p>Warning: slot 'tooltip' was not found</p>
+    </slot>
+  </div>
+</div>
+
+<script>
+  import "studiocms:ui/scripts/tooltip";
+</script>