@studiocms/ui 0.4.17 → 1.0.0-beta.1

package/dist/components/Accordion/Accordion.astro

@@ -18,6 +18,7 @@ const { style = 'outlined', multipleOpen = true } = Astro.props;
 <div class="sui-accordion" class:list={[style]} data-multiple={multipleOpen}>
   <slot />
 </div>
+
 <script>
   import 'studiocms:ui/scripts/accordion';
 </script>

package/dist/components/Accordion/Item.astro

@@ -8,14 +8,16 @@ interface Props {
 const { open = false } = Astro.props;
 ---
 
-<div class="sui-accordion-item" class:list={{ active: open }} data-open={open}>
-    <div class="sui-accordion-summary not-content" tabindex="0">
-        <Icon name="chevron-right-20-solid" class='sui-summary-chevron' width={20} height={20} />
+<div class="sui-accordion-item" data-open={open}>
+    <button class="sui-accordion-summary not-content" type="button" aria-expanded={open}>
+        <Icon name="heroicons:chevron-right-20-solid" class='sui-summary-chevron' width={20} height={20} />
         <div class="sui-accordion-summary-content">
             <slot name="summary" />
         </div>
-    </div>
-    <div class="sui-accordion-details" class:list={{ active: open, open: open, initial: !open }}>
-        <slot name="default" />
+    </button>
+    <div class="sui-accordion-details" aria-hidden={!open}>
+        <div class="sui-accordion-content">
+            <slot name="default" />
+        </div>
     </div>
 </div>

package/dist/components/Accordion/accordion.css

@@ -7,47 +7,43 @@
 }
 .sui-accordion-details {
   margin-left: calc(2.25rem);
-}
-.sui-accordion-details.initial {
-  visibility: hidden;
-  transition: none;
-  max-height: none;
-  position: absolute;
-  top: -200vh;
-  left: -200vh;
-}
-.sui-accordion-details.active {
-  overflow: hidden;
-  max-height: 0;
-  transition: all .3s ease;
+  display: grid;
+  grid-template-rows: 0fr;
   position: relative;
+  bottom: 0;
+  transition: grid-template-rows 0.3s ease, bottom 0.3s ease;
+  overflow: hidden;
+}
+.sui-accordion-item[data-open=true] > .sui-accordion-details {
   bottom: .25rem;
+  grid-template-rows: 1fr;
 }
-.sui-accordion-details.open {
-  max-height: none;
+.sui-accordion-content {
+  min-height: 0;
+  overflow: hidden;
 }
 .sui-accordion.outlined,
 .sui-accordion.filled {
-  border: 1px solid hsl(var(--border));
+  border: 1px solid var(--border);
   border-radius: var(--radius-sm);
 }
 .sui-accordion.filled {
-  background-color: hsl(var(--background-step-1));
+  background-color: var(--background-step-1);
 }
 .sui-accordion.separated .sui-accordion-item,
 .sui-accordion.outlined .sui-accordion-item,
 .sui-accordion.filled .sui-accordion-item {
-  border-bottom: 1px solid hsl(var(--border));
+  border-bottom: 1px solid var(--border);
 }
 .sui-accordion.separated .sui-accordion-item:first-of-type {
-  border-top: 1px solid hsl(var(--border));
+  border-top: 1px solid var(--border);
 }
 .sui-accordion.filled .sui-accordion-item:last-of-type,
 .sui-accordion.outlined .sui-accordion-item:last-of-type {
   border-bottom: none;
 }
 .sui-accordion-summary {
-  color: hsl(var(--text-normal));
+  color: var(--text-normal);
   display: flex;
   flex-direction: row;
   gap: .5rem;
@@ -55,10 +51,28 @@
   padding-left: .5rem;
   padding-bottom: .5rem;
   padding-top: .5rem;
+  user-select: none;
+  width: 100%;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  text-align: left;
+}
+.sui-accordion-summary:focus-visible {
+  outline: 2px solid var(--text-normal);
+  outline-offset: 2px;
 }
 .sui-summary-chevron {
   transition: all .3s ease;
 }
-.sui-accordion-item.active .sui-summary-chevron {
+.sui-accordion-item[data-open=true] > .sui-accordion-summary .sui-summary-chevron {
   transform: rotate(90deg);
 }
+@media (prefers-reduced-motion: reduce) {
+  .sui-accordion-details {
+    transition: none;
+  }
+  .sui-summary-chevron {
+    transition: none;
+  }
+}

package/dist/components/Accordion/accordion.d.ts

@@ -1 +1,46 @@
-declare function loadAccordions(): void;
+/**
+ * Finds the owning accordion element for a given accordion item. Used for nested accordions.
+ * @param accordionItem The accordion item element to find the owning accordion for.
+ * @returns The owning accordion element or null if not found.
+ */
+declare const findOwningAccordion: (accordionItem: HTMLDivElement) => HTMLDivElement | null;
+/**
+ * Gets the direct accordion items for a given accordion. Supports nested accordions.
+ * @param accordion The accordion element to get direct items from.
+ * @returns An array of direct accordion item elements that are direct children of the given accordion.
+ */
+declare const getDirectAccordionItems: (accordion: HTMLDivElement) => HTMLDivElement[];
+/**
+ * Updates the ARIA attributes for a given accordion item.
+ * @param item The accordion item element to update ARIA attributes for.
+ * @param isOpen Whether the accordion item is currently open or closed.
+ */
+declare const updateAccordionARIA: (item: HTMLDivElement, isOpen: boolean) => void;
+/**
+ * Toggles the open state of a given accordion item.
+ * @param accordionItem The accordion item element to toggle.
+ * @param accordion The accordion element that contains the item.
+ * @returns void
+ */
+declare const toggleAccordionItem: (accordionItem: HTMLDivElement, accordion: HTMLDivElement) => void;
+/**
+ * Focuses the next or previous accordion item within a given accordion.
+ * @param accordion The accordion element to focus an item within.
+ * @param direction The direction to focus the item in (next or previous).
+ * @param currentItem The currently focused accordion item.
+ * @returns void
+ */
+declare const focusAccordionItem: (accordion: HTMLDivElement, direction: "next" | "prev", currentItem: HTMLDivElement) => void;
+/**
+ * Initializes the ARIA states for all accordion items on page load.
+ */
+declare const initializeAccordionStates: () => void;
+declare let listenersAdded: boolean;
+/**
+ * Toggles the open state of a given accordion item.
+ * @param event The event that triggered the interaction (click or keydown).
+ * @param isKeyboard Whether the interaction was triggered by a keyboard event.
+ * @returns void
+ */
+declare const handleAccordionInteraction: (event: Event, isKeyboard?: boolean) => void;
+declare const loadAccordions: () => void;

package/dist/components/Accordion/accordion.js

@@ -1,73 +1,98 @@
-function loadAccordions() {
-  const allAccordions = document.querySelectorAll(".sui-accordion");
-  for (const accordion of allAccordions) {
-    const multipleOpen = accordion.dataset.multiple === "true";
-    const items = accordion.querySelectorAll(".sui-accordion-item");
-    for (const item of items) {
-      const summary = item.querySelector(".sui-accordion-summary");
-      const content = item.querySelector(".sui-accordion-details");
-      if (!content || !summary) continue;
-      const itemWidth = item.getBoundingClientRect().width;
-      content.style.width = `${itemWidth - 36}px`;
-      let contentBoundingBox = content.getBoundingClientRect();
-      content.style.width = "auto";
-      if (content.classList.contains("initial")) {
-        content.classList.remove("initial");
-        content.classList.add("active");
-      }
-      const open = item.dataset.open === "true";
-      if (open) {
-        item.classList.add("active");
-        content.style.maxHeight = `${contentBoundingBox.height}px`;
-      }
-      const toggleElement = () => {
-        if (!multipleOpen) {
-          for (const otherItem of items) {
-            if (otherItem !== item) {
-              otherItem.classList.remove("active");
-              const otherContent = otherItem.querySelector(".sui-accordion-details");
-              if (otherContent) {
-                otherContent.style.maxHeight = "0";
-              }
-            }
-          }
-        }
-        item.classList.toggle("active");
-        if (item.classList.contains("active")) {
-          content.style.maxHeight = `${contentBoundingBox.height}px`;
-        } else {
-          content.style.maxHeight = "0";
-          content.classList.remove("open");
-        }
-      };
-      summary.addEventListener("click", toggleElement);
-      summary.addEventListener("keydown", (event) => {
-        if (event.key === "Enter" || event.key === " ") {
-          toggleElement();
-        }
-      });
-      let resetting = false;
-      window.addEventListener("resize", async () => {
-        if (item.classList.contains("active")) {
-          content.style.maxHeight = "none";
-          contentBoundingBox = content.getBoundingClientRect();
-          content.style.maxHeight = `${contentBoundingBox.height}px`;
-        } else if (!resetting) {
-          resetting = true;
-          content.classList.remove("active");
-          content.classList.add("initial");
-          const itemWidth2 = item.getBoundingClientRect().width;
-          content.style.width = `${itemWidth2 - 36}px`;
-          content.style.maxHeight = "none";
-          contentBoundingBox = content.getBoundingClientRect();
-          content.style.width = "auto";
-          content.style.maxHeight = "0";
-          content.classList.add("active");
-          content.classList.remove("initial");
-          resetting = false;
-        }
-      });
+const findOwningAccordion = (accordionItem) => {
+  let current = accordionItem.parentElement;
+  while (current) {
+    if (current.classList.contains("sui-accordion")) {
+      return current;
     }
+    current = current.parentElement;
   }
-}
+  return null;
+};
+const getDirectAccordionItems = (accordion) => {
+  const allItems = accordion.querySelectorAll(".sui-accordion-item");
+  const directItems = [];
+  for (let i = 0; i < allItems.length; i++) {
+    if (findOwningAccordion(allItems[i]) === accordion) {
+      directItems.push(allItems[i]);
+    }
+  }
+  return directItems;
+};
+const updateAccordionARIA = (item, isOpen) => {
+  const summary = item.querySelector(".sui-accordion-summary");
+  const details = item.querySelector(".sui-accordion-details");
+  if (summary) summary.setAttribute("aria-expanded", isOpen.toString());
+  if (details) details.setAttribute("aria-hidden", (!isOpen).toString());
+};
+const toggleAccordionItem = (accordionItem, accordion) => {
+  const isAlreadyOpen = accordionItem.dataset.open === "true";
+  const newState = !isAlreadyOpen;
+  if (accordion.dataset.multiple === "true") {
+    accordionItem.dataset.open = newState.toString();
+  } else {
+    const directItems = getDirectAccordionItems(accordion);
+    for (let i = 0; i < directItems.length; i++) {
+      const item = directItems[i];
+      const shouldBeOpen = item === accordionItem;
+      item.dataset.open = shouldBeOpen.toString();
+      updateAccordionARIA(item, shouldBeOpen);
+    }
+    return;
+  }
+  updateAccordionARIA(accordionItem, newState);
+};
+const focusAccordionItem = (accordion, direction, currentItem) => {
+  const items = getDirectAccordionItems(accordion);
+  const currentIndex = items.indexOf(currentItem);
+  if (currentIndex === -1) return;
+  const targetIndex = direction === "next" ? (currentIndex + 1) % items.length : (currentIndex - 1 + items.length) % items.length;
+  const targetSummary = items[targetIndex]?.querySelector(".sui-accordion-summary");
+  targetSummary?.focus();
+};
+const initializeAccordionStates = () => {
+  const allAccordionItems = document.querySelectorAll(".sui-accordion-item");
+  for (let i = 0; i < allAccordionItems.length; i++) {
+    const item = allAccordionItems[i];
+    const isOpen = item.dataset.open === "true";
+    updateAccordionARIA(item, isOpen);
+  }
+};
+let listenersAdded = false;
+const handleAccordionInteraction = (event, isKeyboard = false) => {
+  const target = event.target;
+  const accordionSummary = target.closest(".sui-accordion-summary");
+  if (!accordionSummary) return;
+  const accordionItem = accordionSummary.closest(".sui-accordion-item");
+  const accordion = accordionItem && findOwningAccordion(accordionItem);
+  if (!accordionItem || !accordion) return;
+  if (isKeyboard) {
+    const keyEvent = event;
+    switch (keyEvent.key) {
+      case "Enter":
+      case " ":
+        event.preventDefault();
+        toggleAccordionItem(accordionItem, accordion);
+        break;
+      case "ArrowDown":
+        event.preventDefault();
+        focusAccordionItem(accordion, "next", accordionItem);
+        break;
+      case "ArrowUp":
+        event.preventDefault();
+        focusAccordionItem(accordion, "prev", accordionItem);
+        break;
+    }
+  } else {
+    event.preventDefault();
+    toggleAccordionItem(accordionItem, accordion);
+  }
+};
+const loadAccordions = () => {
+  initializeAccordionStates();
+  if (!listenersAdded) {
+    document.addEventListener("click", handleAccordionInteraction);
+    document.addEventListener("keydown", (e) => handleAccordionInteraction(e, true));
+    listenersAdded = true;
+  }
+};
 document.addEventListener("astro:page-load", loadAccordions);

package/dist/components/Badge/Badge.astro

@@ -1,9 +1,9 @@
 ---
 import type { StudioCMSColorway } from '../../utils/colors.js';
 import './badge.css';
+import type { AvailableIcons } from 'studiocms:ui/icons';
 import type { HTMLAttributes } from 'astro/types';
 import Icon from '../Icon/Icon.astro';
-import type { HeroIconName } from '../Icon/iconType.js';
 
 interface Props extends Omit<HTMLAttributes<'span'>, 'color'> {
 	/**
@@ -13,7 +13,7 @@ interface Props extends Omit<HTMLAttributes<'span'>, 'color'> {
 	/**
 	 * The icon to display in the badge.
 	 */
-	icon?: HeroIconName;
+	icon?: AvailableIcons;
 	/**
 	 * The icon position. Defaults to `left`.
 	 */

package/dist/components/Badge/badge.css

@@ -11,82 +11,82 @@
   border-radius: var(--radius-md);
 }
 .sui-badge.primary {
-  background-color: hsl(var(--primary-base));
-  color: hsl(var(--text-inverted));
+  background-color: var(--primary-base);
+  color: var(--text-inverted);
 }
 .sui-badge.primary.flat,
 .sui-badge.primary.outlined {
-  background-color: hsla(var(--primary-flat));
-  color: hsl(var(--primary-base));
+  background-color: var(--primary-flat);
+  color: var(--primary-base);
 }
 .sui-badge.primary.outlined {
-  border: 1px solid hsl(var(--primary-base));
+  border: 1px solid var(--primary-base);
 }
 .sui-badge.success {
-  background-color: hsl(var(--success-base));
-  color: hsl(var(--text-inverted));
+  background-color: var(--success-base);
+  color: var(--text-inverted);
 }
 .sui-badge.success.flat,
 .sui-badge.success.outlined {
-  background-color: hsla(var(--success-flat));
-  color: hsl(var(--success-base));
+  background-color: var(--success-flat);
+  color: var(--success-base);
 }
 .sui-badge.success.outlined {
-  border: 1px solid hsl(var(--success-base));
+  border: 1px solid var(--success-base);
 }
 .sui-badge.warning {
-  background-color: hsl(var(--warning-base));
-  color: hsl(var(--text-inverted));
+  background-color: var(--warning-base);
+  color: var(--text-inverted);
 }
 .sui-badge.warning.flat,
 .sui-badge.warning.outlined {
-  background-color: hsla(var(--warning-flat));
-  color: hsl(var(--warning-base));
+  background-color: var(--warning-flat);
+  color: var(--warning-base);
 }
 .sui-badge.warning.outlined {
-  border: 1px solid hsl(var(--warning-base));
+  border: 1px solid var(--warning-base);
 }
 .sui-badge.danger {
-  background-color: hsl(var(--danger-base));
-  color: hsl(var(--text-normal));
+  background-color: var(--danger-base);
+  color: var(--text-normal);
 }
 .sui-badge.danger.flat,
 .sui-badge.danger.outlined {
-  background-color: hsla(var(--danger-flat));
-  color: hsl(var(--danger-base));
+  background-color: var(--danger-flat);
+  color: var(--danger-base);
 }
 .sui-badge.danger.outlined {
-  border: 1px solid hsl(var(--danger-base));
+  border: 1px solid var(--danger-base);
 }
 .sui-badge.info {
-  background-color: hsl(var(--info-base));
-  color: hsl(var(--text-normal));
+  background-color: var(--info-base);
+  color: var(--text-normal);
 }
 .sui-badge.info.flat,
 .sui-badge.info.outlined {
-  background-color: hsla(var(--info-flat));
-  color: hsl(var(--info-base));
+  background-color: var(--info-flat);
+  color: var(--info-base);
 }
 .sui-badge.info.outlined {
-  border: 1px solid hsl(var(--info-base));
+  border: 1px solid var(--info-base);
 }
 .sui-badge.mono {
-  background-color: hsl(var(--mono-base));
-  color: hsl(var(--text-inverted));
+  background-color: var(--mono-base);
+  color: var(--text-inverted);
 }
 .sui-badge.mono.flat,
 .sui-badge.mono.outlined {
-  background-color: hsla(var(--mono-flat));
-  color: hsl(var(--mono-base));
+  background-color: var(--mono-flat);
+  color: var(--mono-base);
 }
 .sui-badge.mono.outlined {
-  border: 1px solid hsl(var(--mono-base));
+  border: 1px solid var(--mono-base);
 }
 [data-theme=light] .sui-badge.danger {
-  color: hsl(var(--text-inverted));
+  color: var(--text-inverted);
 }
 [data-theme=light] .sui-badge.info {
-  color: hsl(var(--text-inverted));
+  color: var(--text-inverted);
 }
 .sui-badge.sm {
   padding: .125rem .75rem;

package/dist/components/Breadcrumbs/breadcrumbs.css

@@ -7,7 +7,7 @@
   display: none;
 }
 .sui-breadcrumbs a {
-  color: hsl(var(--primary-base));
+  color: var(--primary-base);
   text-decoration: none;
 }
 .sui-breadcrumbs a:hover {