@studiocms/ui 0.4.16 → 1.0.0-beta.0

package/dist/components/Skeleton/skeleton.d.ts

@@ -0,0 +1,161 @@
+import { z } from 'astro/zod';
+export declare const SkeletonSchema: z.ZodUnion<[z.ZodObject<{
+    /**
+     * The variant of the skeleton.
+     */
+    variant: z.ZodLiteral<"text">;
+    /**
+     * The class of the skeleton. Defaults to `undefined`.
+     */
+    class: z.ZodOptional<z.ZodString>;
+    /**
+     * The radius of the skeleton. Defaults to `lg`.
+     */
+    radius: z.ZodOptional<z.ZodUnion<[z.ZodLiteral<"none">, z.ZodLiteral<"sm">, z.ZodLiteral<"md">, z.ZodLiteral<"lg">]>>;
+    /**
+     * The animation of the skeleton. Defaults to `slide`.
+     */
+    animation: z.ZodOptional<z.ZodUnion<[z.ZodLiteral<"none">, z.ZodLiteral<"slide">, z.ZodLiteral<"pulse">]>>;
+    /**
+     * The width of the skeleton. Defaults to `100%`.
+     */
+    width: z.ZodOptional<z.ZodUnion<[z.ZodType<`${number}px`, z.ZodTypeDef, `${number}px`>, z.ZodType<`${number}rem`, z.ZodTypeDef, `${number}rem`>, z.ZodType<`${number}%`, z.ZodTypeDef, `${number}%`>]>>;
+    /**
+     * The height of the skeleton. Defaults to `100%`.
+     */
+    height: z.ZodOptional<z.ZodUnion<[z.ZodType<`${number}px`, z.ZodTypeDef, `${number}px`>, z.ZodType<`${number}rem`, z.ZodTypeDef, `${number}rem`>, z.ZodType<`${number}%`, z.ZodTypeDef, `${number}%`>]>>;
+}, "strip", z.ZodTypeAny, {
+    variant: "text";
+    width?: `${number}px` | `${number}rem` | `${number}%` | undefined;
+    height?: `${number}px` | `${number}rem` | `${number}%` | undefined;
+    class?: string | undefined;
+    radius?: "sm" | "none" | "md" | "lg" | undefined;
+    animation?: "none" | "slide" | "pulse" | undefined;
+}, {
+    variant: "text";
+    width?: `${number}px` | `${number}rem` | `${number}%` | undefined;
+    height?: `${number}px` | `${number}rem` | `${number}%` | undefined;
+    class?: string | undefined;
+    radius?: "sm" | "none" | "md" | "lg" | undefined;
+    animation?: "none" | "slide" | "pulse" | undefined;
+}>, z.ZodObject<z.objectUtil.extendShape<{
+    /**
+     * The variant of the skeleton.
+     */
+    variant: z.ZodLiteral<"text">;
+    /**
+     * The class of the skeleton. Defaults to `undefined`.
+     */
+    class: z.ZodOptional<z.ZodString>;
+    /**
+     * The radius of the skeleton. Defaults to `lg`.
+     */
+    radius: z.ZodOptional<z.ZodUnion<[z.ZodLiteral<"none">, z.ZodLiteral<"sm">, z.ZodLiteral<"md">, z.ZodLiteral<"lg">]>>;
+    /**
+     * The animation of the skeleton. Defaults to `slide`.
+     */
+    animation: z.ZodOptional<z.ZodUnion<[z.ZodLiteral<"none">, z.ZodLiteral<"slide">, z.ZodLiteral<"pulse">]>>;
+    /**
+     * The width of the skeleton. Defaults to `100%`.
+     */
+    width: z.ZodOptional<z.ZodUnion<[z.ZodType<`${number}px`, z.ZodTypeDef, `${number}px`>, z.ZodType<`${number}rem`, z.ZodTypeDef, `${number}rem`>, z.ZodType<`${number}%`, z.ZodTypeDef, `${number}%`>]>>;
+    /**
+     * The height of the skeleton. Defaults to `100%`.
+     */
+    height: z.ZodOptional<z.ZodUnion<[z.ZodType<`${number}px`, z.ZodTypeDef, `${number}px`>, z.ZodType<`${number}rem`, z.ZodTypeDef, `${number}rem`>, z.ZodType<`${number}%`, z.ZodTypeDef, `${number}%`>]>>;
+}, {
+    /**
+     * The variant of the skeleton. `card` is used for cards which contain other Skeleton components.
+     */
+    variant: z.ZodLiteral<"card">;
+    /**
+     * The direction of the skeleton. Defaults to `column`.
+     */
+    direction: z.ZodOptional<z.ZodUnion<[z.ZodLiteral<"row">, z.ZodLiteral<"column">]>>;
+    /**
+     * The horizontal alignment of the skeleton. Defaults to `center`.
+     */
+    hAlign: z.ZodOptional<z.ZodUnion<[z.ZodLiteral<"start">, z.ZodLiteral<"center">, z.ZodLiteral<"end">]>>;
+    /**
+     * The vertical alignment of the skeleton. Defaults to `center`.
+     */
+    vAlign: z.ZodOptional<z.ZodUnion<[z.ZodLiteral<"start">, z.ZodLiteral<"center">, z.ZodLiteral<"end">]>>;
+    /**
+     * The gap between the skeletons. Defaults to `0.5rem`.
+     */
+    gap: z.ZodOptional<z.ZodUnion<[z.ZodType<`${number}px`, z.ZodTypeDef, `${number}px`>, z.ZodType<`${number}rem`, z.ZodTypeDef, `${number}rem`>, z.ZodType<`${number}%`, z.ZodTypeDef, `${number}%`>]>>;
+}>, "strip", z.ZodTypeAny, {
+    variant: "card";
+    width?: `${number}px` | `${number}rem` | `${number}%` | undefined;
+    height?: `${number}px` | `${number}rem` | `${number}%` | undefined;
+    class?: string | undefined;
+    radius?: "sm" | "none" | "md" | "lg" | undefined;
+    animation?: "none" | "slide" | "pulse" | undefined;
+    direction?: "row" | "column" | undefined;
+    hAlign?: "center" | "start" | "end" | undefined;
+    vAlign?: "center" | "start" | "end" | undefined;
+    gap?: `${number}px` | `${number}rem` | `${number}%` | undefined;
+}, {
+    variant: "card";
+    width?: `${number}px` | `${number}rem` | `${number}%` | undefined;
+    height?: `${number}px` | `${number}rem` | `${number}%` | undefined;
+    class?: string | undefined;
+    radius?: "sm" | "none" | "md" | "lg" | undefined;
+    animation?: "none" | "slide" | "pulse" | undefined;
+    direction?: "row" | "column" | undefined;
+    hAlign?: "center" | "start" | "end" | undefined;
+    vAlign?: "center" | "start" | "end" | undefined;
+    gap?: `${number}px` | `${number}rem` | `${number}%` | undefined;
+}>, z.ZodObject<z.objectUtil.extendShape<{
+    /**
+     * The variant of the skeleton.
+     */
+    variant: z.ZodLiteral<"text">;
+    /**
+     * The class of the skeleton. Defaults to `undefined`.
+     */
+    class: z.ZodOptional<z.ZodString>;
+    /**
+     * The radius of the skeleton. Defaults to `lg`.
+     */
+    radius: z.ZodOptional<z.ZodUnion<[z.ZodLiteral<"none">, z.ZodLiteral<"sm">, z.ZodLiteral<"md">, z.ZodLiteral<"lg">]>>;
+    /**
+     * The animation of the skeleton. Defaults to `slide`.
+     */
+    animation: z.ZodOptional<z.ZodUnion<[z.ZodLiteral<"none">, z.ZodLiteral<"slide">, z.ZodLiteral<"pulse">]>>;
+    /**
+     * The width of the skeleton. Defaults to `100%`.
+     */
+    width: z.ZodOptional<z.ZodUnion<[z.ZodType<`${number}px`, z.ZodTypeDef, `${number}px`>, z.ZodType<`${number}rem`, z.ZodTypeDef, `${number}rem`>, z.ZodType<`${number}%`, z.ZodTypeDef, `${number}%`>]>>;
+    /**
+     * The height of the skeleton. Defaults to `100%`.
+     */
+    height: z.ZodOptional<z.ZodUnion<[z.ZodType<`${number}px`, z.ZodTypeDef, `${number}px`>, z.ZodType<`${number}rem`, z.ZodTypeDef, `${number}rem`>, z.ZodType<`${number}%`, z.ZodTypeDef, `${number}%`>]>>;
+}, {
+    /**
+     * The variant of the skeleton. `circle` is used for circles which contain other Skeleton components.
+     */
+    variant: z.ZodUnion<[z.ZodLiteral<"circle">, z.ZodLiteral<"block">]>;
+    /**
+     * The width of the skeleton.
+     */
+    width: z.ZodUnion<[z.ZodType<`${number}px`, z.ZodTypeDef, `${number}px`>, z.ZodType<`${number}rem`, z.ZodTypeDef, `${number}rem`>, z.ZodType<`${number}%`, z.ZodTypeDef, `${number}%`>]>;
+    /**
+     * The height of the skeleton.
+     */
+    height: z.ZodUnion<[z.ZodType<`${number}px`, z.ZodTypeDef, `${number}px`>, z.ZodType<`${number}rem`, z.ZodTypeDef, `${number}rem`>, z.ZodType<`${number}%`, z.ZodTypeDef, `${number}%`>]>;
+}>, "strip", z.ZodTypeAny, {
+    width: `${number}px` | `${number}rem` | `${number}%`;
+    height: `${number}px` | `${number}rem` | `${number}%`;
+    variant: "circle" | "block";
+    class?: string | undefined;
+    radius?: "sm" | "none" | "md" | "lg" | undefined;
+    animation?: "none" | "slide" | "pulse" | undefined;
+}, {
+    width: `${number}px` | `${number}rem` | `${number}%`;
+    height: `${number}px` | `${number}rem` | `${number}%`;
+    variant: "circle" | "block";
+    class?: string | undefined;
+    radius?: "sm" | "none" | "md" | "lg" | undefined;
+    animation?: "none" | "slide" | "pulse" | undefined;
+}>]>;

package/dist/components/Skeleton/skeleton.js

@@ -0,0 +1,71 @@
+import { z } from "astro/zod";
+const measurementPx = z.custom();
+const measurementRem = z.custom();
+const measurementPercent = z.custom();
+const measurement = z.union([measurementPx, measurementRem, measurementPercent]);
+const BaseSkeletonSchema = z.object({
+  /**
+   * The variant of the skeleton.
+   */
+  variant: z.literal("text"),
+  /**
+   * The class of the skeleton. Defaults to `undefined`.
+   */
+  class: z.string().optional(),
+  /**
+   * The radius of the skeleton. Defaults to `lg`.
+   */
+  radius: z.union([z.literal("none"), z.literal("sm"), z.literal("md"), z.literal("lg")]).optional(),
+  /**
+   * The animation of the skeleton. Defaults to `slide`.
+   */
+  animation: z.union([z.literal("none"), z.literal("slide"), z.literal("pulse")]).optional(),
+  /**
+   * The width of the skeleton. Defaults to `100%`.
+   */
+  width: measurement.optional(),
+  /**
+   * The height of the skeleton. Defaults to `100%`.
+   */
+  height: measurement.optional()
+});
+const CardSkeletonSchema = BaseSkeletonSchema.extend({
+  /**
+   * The variant of the skeleton. `card` is used for cards which contain other Skeleton components.
+   */
+  variant: z.literal("card"),
+  /**
+   * The direction of the skeleton. Defaults to `column`.
+   */
+  direction: z.union([z.literal("row"), z.literal("column")]).optional(),
+  /**
+   * The horizontal alignment of the skeleton. Defaults to `center`.
+   */
+  hAlign: z.union([z.literal("start"), z.literal("center"), z.literal("end")]).optional(),
+  /**
+   * The vertical alignment of the skeleton. Defaults to `center`.
+   */
+  vAlign: z.union([z.literal("start"), z.literal("center"), z.literal("end")]).optional(),
+  /**
+   * The gap between the skeletons. Defaults to `0.5rem`.
+   */
+  gap: measurement.optional()
+});
+const BlockCircleSchema = BaseSkeletonSchema.extend({
+  /**
+   * The variant of the skeleton. `circle` is used for circles which contain other Skeleton components.
+   */
+  variant: z.union([z.literal("circle"), z.literal("block")]),
+  /**
+   * The width of the skeleton.
+   */
+  width: measurement,
+  /**
+   * The height of the skeleton.
+   */
+  height: measurement
+});
+const SkeletonSchema = z.union([BaseSkeletonSchema, CardSkeletonSchema, BlockCircleSchema]);
+export {
+  SkeletonSchema
+};

package/dist/components/Tabs/TabItem.astro

@@ -1,7 +1,7 @@
 ---
+import type { AvailableIcons } from 'studiocms:ui/icons';
 import type { StudioCMSColorway } from '../../utils/colors.js';
 import { generateID } from '../../utils/generateID.js';
-import type { HeroIconName } from '../Icon/iconType.js';
 
 /**
  * The props for the TabItem component.
@@ -10,7 +10,7 @@ interface Props {
 	/**
 	 * The icon to display next to the tab.
 	 */
-	icon?: HeroIconName;
+	icon?: AvailableIcons;
 	/**
 	 * The label of the tab.
 	 */
@@ -19,19 +19,24 @@ interface Props {
 	 * The color of the tab. Defaults to `primary`.
 	 */
 	color?: Exclude<StudioCMSColorway, 'default'>;
+	/**
+	 * Whether the tab should be active by default.
+	 */
+	active?: boolean;
 }
 
 const id = generateID('tab');
 
-const { icon, label, color = 'primary' } = Astro.props;
+const { icon, label, color = 'primary', active = false } = Astro.props;
 ---
-<sui-tab-item 
-  data-icon={icon}
-  data-label={label}
-  data-color={color}
-  data-tab-id={id}
+<sui-tab-item
+	data-icon={icon}
+	data-label={label}
+	data-color={color}
+	data-tab-id={id}
+	data-active={active ? 'true' : undefined}
 >
-  <slot />
+	<slot />
 </sui-tab-item>
 <style>
   sui-tab-item {

package/dist/components/Tabs/Tabs.astro

@@ -1,15 +1,16 @@
 ---
+import type { AvailableIcons } from 'studiocms:ui/icons';
 import type { StudioCMSColorway } from '../../utils/colors.js';
 import { generateID } from '../../utils/generateID.js';
 import Icon from '../Icon/Icon.astro';
-import type { HeroIconName } from '../Icon/iconType.js';
 import './tabs.css';
 
 interface Tab {
-	icon?: HeroIconName;
+	icon?: AvailableIcons;
 	label: string;
 	color: Exclude<StudioCMSColorway, 'default'>;
 	tabId: string;
+	active?: boolean;
 }
 
 /**
@@ -35,63 +36,94 @@ interface Props {
 	align?: 'left' | 'center' | 'right';
 }
 
-const extractTabInfoWithRegex = (input: string) => {
-	const tabItemRegex = /<sui-tab-item([^>]*)>/g;
-
+/**
+ * Parses data attributes from an HTML tag string.
+ * @param tagContent The string content of the HTML tag.
+ * @returns An object of key-value pairs for the parsed attributes.
+ */
+const getAttributes = (tagContent: string) => {
+	const attributes: { [key: string]: string | boolean } = {};
 	const attributeRegex = /data-([\w-]+)="([^"]*)"/g;
+	for (const match of tagContent.matchAll(attributeRegex)) {
+		const [, key, value] = match;
+		if (!key || !value) continue;
+		if (key === 'icon' || key === 'label' || key === 'color') {
+			attributes[key] = value;
+		} else if (key === 'tab-id') {
+			attributes.tabId = value;
+		} else if (key === 'active') {
+			attributes.active = value === 'true';
+		}
+	}
+	return attributes;
+};
 
-	const tabs: Tab[] = [];
-	let tabMatch: RegExpExecArray | null;
-
-	// biome-ignore lint/suspicious/noAssignInExpressions: Nop
-	while ((tabMatch = tabItemRegex.exec(input)) !== null) {
-		let attributes: { [key: string]: string } = {};
-
-		let attributeMatch: RegExpExecArray | null;
-
-		if (!tabMatch[1]) continue;
-
-		// biome-ignore lint/suspicious/noAssignInExpressions: Nop
-		while ((attributeMatch = attributeRegex.exec(tabMatch[1])) !== null) {
-			if (!attributeMatch[1] || !attributeMatch[2]) continue;
-
-			if (
-				attributeMatch[1] === 'icon' ||
-				attributeMatch[1] === 'label' ||
-				attributeMatch[1] === 'color'
-			) {
-				attributes[attributeMatch[1]] = attributeMatch[2];
+/**
+ * Extracts direct child Tab info from an HTML string, ignoring nested tabs.
+ * This function uses a two-pass approach to handle nesting.
+ * 1. It first scans for all nested `sui-tabs-container` elements and records their start and end positions.
+ * 2. It then finds all `sui-tab-item` elements and includes only those that do not fall within the nested ranges.
+ * @param html The raw HTML string from the rendered slot.
+ * @returns An array of Tab objects for direct children only.
+ */
+const extractTabInfoWithRegex = (html: string): Tab[] => {
+	const nestedContainerRanges: { start: number; end: number }[] = [];
+	const containerRegex = /<div[^>]*?class="[^"]*?\bsui-tabs-container\b[^"]*?".*?>/gi;
+	for (const containerMatch of html.matchAll(containerRegex)) {
+		const startIndex = containerMatch.index;
+		let openCount = 0;
+		const searchArea = html.substring(startIndex);
+		const tagRegex = /<\/?div/gi;
+		for (const tagMatch of searchArea.matchAll(tagRegex)) {
+			if (tagMatch[0].toLowerCase() === '<div') {
+				openCount++;
+			} else {
+				openCount--;
 			}
-
-			if (attributeMatch[1] === 'tab-id') {
-				attributes.tabId = attributeMatch[2];
+			if (openCount === 0) {
+				const endIndex = startIndex + tagMatch.index + tagMatch[0].length;
+				nestedContainerRanges.push({ start: startIndex, end: endIndex });
+				break;
 			}
 		}
-
-		tabs.push(attributes as unknown as Tab);
 	}
 
+	const tabs: Tab[] = [];
+	const tabItemRegex = /<sui-tab-item([^>]*?)>/gi;
+	for (const tabMatch of html.matchAll(tabItemRegex)) {
+		const tabIndex = tabMatch.index;
+		const isNested = nestedContainerRanges.some(
+			(range) => tabIndex > range.start && tabIndex < range.end
+		);
+		if (!isNested) {
+			const attributes = getAttributes(tabMatch[1]);
+			if (attributes.tabId) {
+				tabs.push(attributes as unknown as Tab);
+			}
+		}
+	}
 	return tabs;
 };
 
+/**
+ * Injects the `active` class into the specified tab item in an HTML string.
+ * @param tabId The `data-tab-id` of the tab to mark as active.
+ * @param html The raw HTML string to modify.
+ * @returns The modified HTML string with the active tab.
+ */
 const markTabAsActive = (tabId: string, html: string): string => {
 	if (!tabId) return html;
 
 	const updatedHtml = html.replace(
 		/<sui-tab-item[^>]*data-tab-id="([^"]*)"[^>]*>/g,
 		(match, tabIdValue) => {
-			// Check if the tabId matches
 			if (tabIdValue === tabId) {
-				// Check if the element already has a class attribute
 				if (match.includes('class="')) {
-					// If class attribute exists, add 'active' to the class attribute
 					return match.replace(/(class="[^"]*)"/, '$1 active"');
 				}
-
-				// If class attribute does not exist, add it
 				return match.replace(/(<sui-tab-item[^>]*data-tab-id="[^"]*")/, '$1 class="active"');
 			}
-			return match; // Return original if the tabId does not match
+			return match;
 		}
 	);
 
@@ -111,7 +143,8 @@ const syncKey = originalSyncKey ? `sui-tabs-${originalSyncKey}` : undefined;
 
 const tabContents = await Astro.slots.render('default');
 const tabs = extractTabInfoWithRegex(tabContents);
-const finalizedTabContents = markTabAsActive(tabs[0]?.tabId || '', tabContents);
+const defaultActiveTab = tabs.find((tab) => tab.active) ?? tabs[0];
+const finalizedTabContents = markTabAsActive(defaultActiveTab?.tabId || '', tabContents);
 const containerId = generateID('sui-tabs-container');
 ---
 
@@ -124,27 +157,31 @@ const containerId = generateID('sui-tabs-container');
   class:list={[variant, align]}
 >
   <div class="sui-tabs-list" role="tablist">
-    {tabs.map((tab, i) => (
-      <button 
-        role="tab"
-		type="button"
-        class="sui-tab-header"
-        id={syncKey ? `${syncKey}-${i}` : undefined}
-        tabindex={i === 0 ? 0 : -1}
-        data-tab-child={tab.tabId}
-        class:list={[i === 0 && "active", tab.color, syncKey && `${syncKey}:${i}`]}
-      >
-        {tab.icon && (
-          <Icon name={tab.icon} width={24} height={24} />
-        )}
-        <span>{tab.label}</span>
-      </button>
-    ))}
+    {tabs.map((tab, i) => {
+		const isActive = tab.tabId === defaultActiveTab?.tabId;
+		return (
+			<button 
+				role="tab"
+				type="button"
+				class="sui-tab-header"
+				id={syncKey ? `${syncKey}-${i}` : undefined}
+				tabindex={isActive ? 0 : -1}
+				data-tab-child={tab.tabId}
+				class:list={[isActive && "active", tab.color, syncKey && `${syncKey}:${i}`]}
+			>
+				{tab.icon && (
+				<Icon name={tab.icon} width={24} height={24} />
+				)}
+				<span>{tab.label}</span>
+			</button>
+		)
+	})}
   </div>
   <div class="sui-tabs-content">
     <Fragment set:html={finalizedTabContents} />
   </div>
 </div>
+
 <script>
 import "studiocms:ui/scripts/tabs"
 </script>

package/dist/components/Tabs/tabs.css

@@ -48,29 +48,29 @@
   pointer-events: none;
 }
 .sui-tabs-container.default .sui-tab-header:focus-visible {
-  outline: 2px solid hsl(var(--text-normal));
+  outline: 2px solid var(--text-normal);
   outline-offset: 2px;
 }
 .sui-tabs-container.default .sui-tab-header:hover {
-  background-color: hsla(var(--default-flat-active)) !important;
+  background-color: var(--default-flat-active) !important;
 }
 .sui-tabs-container.default .sui-tab-header.active {
-  background-color: hsla(var(--primary-flat-active)) !important;
+  background-color: var(--primary-flat-active) !important;
 }
 .sui-tabs-container.default .sui-tab-header.success.active {
-  background-color: hsla(var(--success-flat-active)) !important;
+  background-color: var(--success-flat-active) !important;
 }
 .sui-tabs-container.default .sui-tab-header.warning.active {
-  background-color: hsla(var(--warning-flat-active)) !important;
+  background-color: var(--warning-flat-active) !important;
 }
 .sui-tabs-container.default .sui-tab-header.danger.active {
-  background-color: hsla(var(--danger-flat-active)) !important;
+  background-color: var(--danger-flat-active) !important;
 }
 .sui-tabs-container.default .sui-tab-header.danger.info {
-  background-color: hsla(var(--info-flat-active)) !important;
+  background-color: var(--info-flat-active) !important;
 }
 .sui-tabs-container.default .sui-tab-header.danger.mono {
-  background-color: hsla(var(--mono-flat-active)) !important;
+  background-color: var(--mono-flat-active) !important;
 }
 .sui-tabs-container.starlight .sui-tabs-list {
   margin-bottom: 1rem;
@@ -83,21 +83,21 @@
   left: 0;
   width: 100%;
   height: 2px;
-  background-color: hsl(var(--border));
+  background-color: var(--border);
 }
 .sui-tabs-container.starlight .sui-tab-header {
   padding: 0.25rem 1.25rem;
-  color: hsl(var(--text-muted));
+  color: var(--text-muted);
 }
 .sui-tabs-container.starlight .sui-tab-header.active {
   font-weight: 600;
-  color: hsl(var(--text-normal));
+  color: var(--text-normal);
 }
 .sui-tabs-container.starlight .sui-tab-header.active::after {
   content: "";
   width: 100%;
   height: 2px;
-  background-color: hsl(var(--primary-base));
+  background-color: var(--primary-base);
   position: absolute;
   bottom: 0;
   left: 0;
@@ -108,9 +108,9 @@
   width: calc(100% - 2px);
   bottom: 1px;
   left: 1px;
-  border: 2px solid hsl(var(--primary-base));
+  border: 2px solid var(--primary-base);
   background-color: transparent;
-  outline: 1px solid hsl(var(--text-normal));
+  outline: 1px solid var(--text-normal);
 }
 .sui-tabs-content {
   width: 100%;

package/dist/components/Tabs/tabs.d.ts

@@ -1 +1,17 @@
-declare function loadTabs(): void;
+/**
+ * Handles the logic of switching tabs, updating ARIA attributes, and syncing state.
+ * @param tabContainer The main container of the tab system.
+ * @param newActiveHeader The header element of the tab to be activated.
+ * @param originatedFromSync A flag to prevent cyclic updates with synced tabs.
+ */
+declare const switchTab: (tabContainer: HTMLDivElement, newActiveHeader: HTMLElement, originatedFromSync?: boolean) => void;
+/**
+ * Sets up a single tab container, wiring up ARIA attributes and event listeners.
+ * @param tabContainer The main container element of a tab system to set up.
+ */
+declare const setupTabContainer: (tabContainer: HTMLDivElement) => void;
+/**
+ * Initializes all tab systems on the page.
+ * Finds all tab containers and applies the setup logic to each.
+ */
+declare const loadTabs: () => void;