@studiocms/ui 1.0.0-beta.0 → 1.0.0-beta.2

package/dist/components/Modal/modal.css

@@ -3,7 +3,7 @@
   border-radius: var(--radius-md);
   padding: 1.5rem;
   box-shadow: 0px 4px 8px var(--shadow);
-  animation: hide .25s ease;
+  animation: hide 0.25s ease;
   overflow: visible;
   margin: auto;
   z-index: 50;
@@ -19,7 +19,7 @@
   width: 608px;
 }
 .sui-modal[open] {
-  animation: show .25s ease-in-out;
+  animation: show 0.25s ease-in-out;
 }
 html:has(.sui-modal[open]),
 body:has(.sui-modal[open]) {
@@ -27,7 +27,7 @@ body:has(.sui-modal[open]) {
 }
 .sui-modal[open]::backdrop {
   background-color: rgba(0, 0, 0, 0.75);
-  animation: backdrop .3s ease-in-out forwards;
+  animation: backdrop 0.3s ease-in-out forwards;
 }
 .sui-modal-header:has(*) {
   margin-bottom: 1rem;
@@ -46,7 +46,7 @@ body:has(.sui-modal[open]) {
   display: flex;
   align-items: center;
   justify-content: center;
-  transition: background-color .15s ease;
+  transition: background-color 0.15s ease;
   border-radius: var(--radius-sm);
 }
 .x-mark-container:hover {

package/dist/components/Progress/Progress.astro

@@ -5,15 +5,16 @@ import type { HTMLAttributes } from 'astro/types';
 
 type Props = {
 	id: string;
+	label: string;
 	value?: number;
 	max?: number;
 	color?: Omit<StudioCMSColorway, 'default'>;
 } & HTMLAttributes<'div'>;
 
-const { id, value = 0, max = 100, color = 'primary' } = Astro.props;
+const { id, label, value = 0, max = 100, color = 'primary' } = Astro.props;
 ---
 
-<div class="sui-progress" class:list={[color]} role="progressbar" id={id} data-max={max} data-value={value}>
+<div class="sui-progress" class:list={[color]} role="progressbar" aria-label={label} id={id} data-max={max} data-value={value}>
   <div class="sui-progress-slider" />
 </div>
 <script>

package/dist/components/Progress/progress.css

@@ -8,7 +8,7 @@
 .sui-progress-slider {
   height: 100%;
   width: 0;
-  transition: all .75s ease;
+  transition: all 0.75s ease;
   border-radius: var(--radius-sm);
   background-color: var(--primary-base);
 }

package/dist/components/RadioGroup/RadioGroup.astro

@@ -94,7 +94,7 @@ const {
         for={value}
         class="sui-radio-label"
         class:list={[ individuallyDisabled && "disabled" ]}
-      >
+	>
         <div class="sui-radio-box-container">
           <div 
             class="sui-radio-box" 

package/dist/components/RadioGroup/radiogroup.css

@@ -1,7 +1,7 @@
 .sui-radio-container {
   display: flex;
   flex-direction: column;
-  gap: .5rem;
+  gap: 0.5rem;
 }
 .sui-radio-container.disabled {
   opacity: 0.5;
@@ -13,13 +13,13 @@
   pointer-events: none;
 }
 .req-star {
-  color: var(--danger-base);
+  color: var(--danger-vibrant);
   font-weight: 700;
 }
 .sui-radio-inputs {
   display: flex;
   flex-direction: column;
-  gap: .75rem;
+  gap: 0.75rem;
 }
 .sui-radio-container.horizontal .sui-radio-inputs {
   flex-direction: row;
@@ -27,7 +27,7 @@
 .sui-radio-label {
   display: flex;
   flex-direction: row;
-  gap: .5rem;
+  gap: 0.5rem;
   position: relative;
   align-items: center;
 }
@@ -55,12 +55,12 @@
   outline-color: var(--warning-base);
 }
 .sui-radio-container.danger .sui-radio-label:has(.sui-radio-toggle:checked) .sui-radio-box {
-  background-color: var(--danger-base);
-  outline-color: var(--danger-base);
+  background-color: var(--danger-vibrant);
+  outline-color: var(--danger-vibrant);
 }
 .sui-radio-container.info .sui-radio-label:has(.sui-radio-toggle:checked) .sui-radio-box {
-  background-color: var(--info-base);
-  outline-color: var(--info-base);
+  background-color: var(--info-vibrant);
+  outline-color: var(--info-vibrant);
 }
 .sui-radio-container.mono .sui-radio-label:has(.sui-radio-toggle:checked) .sui-radio-box {
   background-color: var(--mono-base);
@@ -81,7 +81,7 @@
   border-radius: var(--radius-full);
   outline: 1px solid var(--default-base);
   outline-offset: 4px;
-  transition: all .15s ease;
+  transition: all 0.15s ease;
 }
 .sui-radio-box:focus-visible {
   outline-color: var(--text-normal) !important;

package/dist/components/RadioGroup/radiogroup.js

@@ -4,7 +4,6 @@ function loadRadioGroups() {
     if (element.dataset.initialized) continue;
     element.dataset.initialized = "true";
     const radioBoxes = element.querySelectorAll(".sui-radio-box");
-    let i = 0;
     for (const radioBox of radioBoxes) {
       radioBox.addEventListener("keydown", (e) => {
         if (e.key === "Enter" || e.key === " ") {
@@ -38,7 +37,6 @@ function loadRadioGroups() {
           previousRadioBox.click();
         }
       });
-      i++;
     }
     element.addEventListener("keydown", (e) => {
       if (e.key !== "Enter") return;

package/dist/components/Row/row.css

@@ -8,7 +8,7 @@
   align-items: center;
 }
 .sui-row.sm {
-  gap: .5rem;
+  gap: 0.5rem;
 }
 .sui-row.md {
   gap: 1rem;

package/dist/components/SearchSelect/SearchSelect.astro

@@ -151,8 +151,12 @@ const defaultLabel = selected
 				tabindex={disabled ? -1 : 0}
 				label={label || ''}
 				isRequired={isRequired || false}
+				name={name ? `${name}-input` : undefined}
+				icon={{
+					name: "heroicons:chevron-up-down",
+					position: "right"
+				}}
 			/>
-			<Icon name="heroicons:chevron-up-down" class="sui-search-select-indicator" width={24} height={24} />
 		</div>
 		<div class="sui-search-select-dropdown">
 			<ul class="sui-search-select-dropdown-list" role="listbox" id={`${name}-dropdown`}>
@@ -189,7 +193,7 @@ const defaultLabel = selected
 				const isSelected = Array.isArray(selected)
 					? selected.map((y) => y && y.value).includes(x.value)
 					: selected?.value === x.value;
-					
+
 				return (
 					<option
 						value={x.value}
@@ -208,10 +212,10 @@ const defaultLabel = selected
 		</span>
 	)}
 	{
-		multiple && Array.isArray(selected ?? []) && (		
+		multiple && Array.isArray(selected ?? []) && (
 			<div class="sui-search-select-badge-container">
 				{
-					((selected ?? []) as SearchSelectOption[]).map((s) => s && 
+					((selected ?? []) as SearchSelectOption[]).map((s) => s &&
 						<Badge class="sui-search-select-badge" data-value={s.value} size="sm" label={s.label} iconPosition="right" icon="heroicons:x-mark" />
 					)
 				}

package/dist/components/SearchSelect/searchselect.css

@@ -18,7 +18,7 @@
   font-size: 14px;
 }
 .req-star {
-  color: var(--danger-base);
+  color: var(--danger-vibrant);
   font-weight: 700;
 }
 .sui-search-select-dropdown-container {
@@ -32,13 +32,10 @@
 .sui-search-select-dropdown {
   position: absolute;
   width: 100%;
-  border: 1px solid var(--border);
   list-style: none;
   margin: 0;
   padding: 0;
   flex-direction: column;
-  border-radius: var(--radius-md);
-  background-color: var(--background-step-2);
   overflow: hidden;
   top: calc(100% + 0.25rem);
   left: 0;
@@ -115,8 +112,8 @@
 }
 .sui-search-select-indicator {
   position: absolute;
-  bottom: .675rem;
-  right: .675rem;
+  bottom: 0.675rem;
+  right: 0.675rem;
 }
 .sui-search-input-wrapper:has(input:focus) + .sui-search-select-dropdown {
   display: flex;
@@ -141,7 +138,6 @@
   cursor: default;
   position: relative;
   padding-right: 2rem;
-  border-block: 1.5px solid rgba(0, 0, 0, 0);
 }
 .sui-search-select-badge-container .sui-search-select-badge.sui-badge svg {
   position: absolute;

package/dist/components/SearchSelect/searchselect.js

@@ -25,7 +25,14 @@ function loadSearchSelects() {
   };
   const createSelectBadge = (value, label) => {
     const badge = document.createElement("span");
-    badge.classList.add("sui-badge", "primary", "sm", "default", "full", "sui-search-select-badge");
+    badge.classList.add(
+      "sui-badge",
+      "primary",
+      "sm",
+      "outlined",
+      "full",
+      "sui-search-select-badge"
+    );
     badge.setAttribute("data-value", value);
     badge.innerHTML = `${label} <svg style='min-width: 8px' xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 24 24' role="button" tabindex="0"><path fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 18L18 6M6 6l12 12'></path></svg>`;
     return badge;
@@ -41,8 +48,8 @@ function loadSearchSelects() {
       return;
     }
     for (const value of selectedValues.sort((a, b) => {
-      const numA = Number.parseInt(a.match(/\d+/)?.[0] || "0");
-      const numB = Number.parseInt(b.match(/\d+/)?.[0] || "0");
+      const numA = Number.parseInt(a.match(/\d+/)?.[0] || "0", 10);
+      const numB = Number.parseInt(b.match(/\d+/)?.[0] || "0", 10);
       return numA - numB;
     })) {
       const option = allOptions.find((opt) => opt.value === value);
@@ -71,7 +78,7 @@ function loadSearchSelects() {
   const updateOptionSelection = (value, container, state2, forceState) => {
     const currentSelected = state2.selectedOptionsMap[container.dataset.id] || [];
     const isCurrentlySelected = currentSelected.includes(value);
-    const max = Number.parseInt(container.dataset.multipleMax);
+    const max = Number.parseInt(container.dataset.multipleMax, 10);
     if (!isCurrentlySelected && !Number.isNaN(max) && currentSelected.length >= max) {
       return false;
     }
@@ -105,7 +112,7 @@ function loadSearchSelects() {
       ".sui-search-select-option"
     );
     for (const entry of optionElements) {
-      if (Number.parseInt(entry.dataset.optionIndex) === state2.focusIndex) {
+      if (Number.parseInt(entry.dataset.optionIndex, 10) === state2.focusIndex) {
         entry.classList.add("focused");
       } else {
         entry.classList.remove("focused");
@@ -279,7 +286,7 @@ function loadSearchSelects() {
         ".sui-search-select-option"
       );
       const focusedOption = Array.from(optionElements).find(
-        (entry) => Number.parseInt(entry.dataset.optionIndex) === state2.focusIndex
+        (entry) => Number.parseInt(entry.dataset.optionIndex, 10) === state2.focusIndex
       );
       if (focusedOption && !focusedOption.classList.contains("disabled") && !focusedOption.hasAttribute("disabled")) {
         const value = focusedOption.dataset.value;

package/dist/components/Select/select.css

@@ -20,7 +20,7 @@
   font-size: 14px;
 }
 .req-star {
-  color: var(--danger-base);
+  color: var(--danger-vibrant);
   font-weight: 700;
 }
 .sui-select-button {
@@ -70,13 +70,10 @@
 .sui-select-dropdown {
   position: absolute;
   width: 100%;
-  border: 1px solid var(--border);
   list-style: none;
   margin: 0;
   padding: 0;
   flex-direction: column;
-  border-radius: var(--radius-md);
-  background-color: var(--background-step-2);
   overflow: hidden;
   top: calc(100% + 0.25rem);
   left: 0;
@@ -167,7 +164,6 @@
   cursor: default;
   position: relative;
   padding-right: 2rem;
-  border-block: 1.5px solid rgba(0, 0, 0, 0);
 }
 .sui-select-badge-container .sui-select-badge.sui-badge svg {
   position: absolute;

package/dist/components/Select/select.js

@@ -62,7 +62,7 @@ function loadSelects() {
   };
   const createSelectBadge = (value, label) => {
     const badge = document.createElement("span");
-    badge.classList.add("sui-badge", "primary", "sm", "default", "full", "sui-select-badge");
+    badge.classList.add("sui-badge", "primary", "sm", "outlined", "full", "sui-select-badge");
     badge.setAttribute("data-value", value);
     badge.innerHTML = `${label} <svg style='min-width: 8px' xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 24 24'><path fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 18L18 6M6 6l12 12'></path></svg>`;
     return badge;
@@ -139,7 +139,7 @@ function loadSelects() {
     const selectOpt = container?.dropdown?.querySelector(
       `.sui-select-option[value='${id}']`
     );
-    const max = Number.parseInt(container?.dataset.multipleMax);
+    const max = Number.parseInt(container?.dataset.multipleMax, 10);
     const selectedCount = container?.querySelectorAll(".sui-select-option.selected").length ?? 0;
     const selectedCountEl = container?.querySelector(
       ".sui-select-max-span .sui-select-select-count"
@@ -164,7 +164,7 @@ function loadSelects() {
       ".sui-select-option"
     );
     for (const entry of optionElements) {
-      if (Number.parseInt(entry.dataset.optionIndex) === state2.focusIndex) {
+      if (Number.parseInt(entry.dataset.optionIndex, 10) === state2.focusIndex) {
         entry.classList.add("focused");
       } else {
         entry.classList.remove("focused");

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

@@ -38,53 +38,19 @@ export declare const SkeletonSchema: z.ZodUnion<[z.ZodObject<{
     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`.
-     */
+}>, z.ZodObject<{
     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, {
+}, "strip", z.ZodTypeAny, {
     variant: "card";
     width?: `${number}px` | `${number}rem` | `${number}%` | undefined;
     height?: `${number}px` | `${number}rem` | `${number}%` | undefined;
@@ -106,45 +72,15 @@ export declare const SkeletonSchema: z.ZodUnion<[z.ZodObject<{
     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`.
-     */
+}>, z.ZodObject<{
     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, {
+}, "strip", z.ZodTypeAny, {
     width: `${number}px` | `${number}rem` | `${number}%`;
     height: `${number}px` | `${number}rem` | `${number}%`;
     variant: "circle" | "block";

package/dist/components/Tabs/TabItem.astro

@@ -23,17 +23,23 @@ interface Props {
 	 * Whether the tab should be active by default.
 	 */
 	active?: boolean;
+
+	/**
+	 * The unique ID of the tab. If not provided, a random ID will be generated.
+	 */
+	id?: string;
 }
 
 const id = generateID('tab');
 
-const { icon, label, color = 'primary', active = false } = Astro.props;
+const { icon, label, color = 'primary', active = false, id: customId } = Astro.props;
 ---
 <sui-tab-item
+	id={customId ?? id}
 	data-icon={icon}
 	data-label={label}
 	data-color={color}
-	data-tab-id={id}
+	data-tab-id={customId ?? id}
 	data-active={active ? 'true' : undefined}
 >
 	<slot />

package/dist/components/Tabs/Tabs.astro

@@ -34,6 +34,11 @@ interface Props {
 	 * The alignment of the tabs. Defaults to `left`.
 	 */
 	align?: 'left' | 'center' | 'right';
+
+	/**
+	 * The ID of the tab.
+	 */
+	id?: string;
 }
 
 /**
@@ -133,6 +138,7 @@ const markTabAsActive = (tabId: string, html: string): string => {
 const uniqueId = generateID('sui-tabs-container');
 
 const {
+	id: customId,
 	syncKey: originalSyncKey,
 	storage = 'session',
 	variant = 'default',
@@ -150,9 +156,9 @@ const containerId = generateID('sui-tabs-container');
 
 <div 
   class="sui-tabs-container"
-  id={containerId}
+  id={customId ?? containerId}
   data-sync-key={syncKey}
-  data-unique-id={uniqueId}
+  data-unique-id={customId ?? uniqueId}
   data-storage-strategy={storage}
   class:list={[variant, align]}
 >

package/dist/components/Tabs/tabs.css

@@ -27,7 +27,7 @@
   margin-top: 0 !important;
   display: flex;
   flex-direction: row;
-  gap: .5rem;
+  gap: 0.5rem;
   cursor: pointer;
   position: relative;
   min-width: fit-content;
@@ -36,7 +36,7 @@
   border-radius: var(--radius-md);
   height: 40px;
   padding: 0.5rem 0.75rem;
-  transition: all .15s ease;
+  transition: all 0.15s ease;
   font-size: 0.875em;
   outline: 2px solid transparent;
   outline-offset: 2px;

package/dist/components/Textarea/textarea.css

@@ -1,7 +1,7 @@
 .sui-textarea-label {
   display: flex;
   flex-direction: column;
-  gap: .25rem;
+  gap: 0.25rem;
   max-width: 80ch;
 }
 .sui-textarea-label.disabled {
@@ -20,12 +20,12 @@
   font-size: 14px;
 }
 .sui-textarea {
-  padding: .65rem;
+  padding: 0.65rem;
   border-radius: var(--radius-md);
   border: 1px solid var(--border);
   background: var(--background-step-2);
   color: var(--text-normal);
-  transition: all .15s ease;
+  transition: all 0.15s ease;
   resize: none;
   min-height: 12ch;
   width: 100%;
@@ -44,6 +44,6 @@
   background: var(--background-step-2);
 }
 .req-star {
-  color: var(--danger-base);
+  color: var(--danger-vibrant);
   font-weight: 700;
 }

package/dist/components/Toast/Toaster.astro

@@ -41,14 +41,14 @@ const {
 	gap = 8,
 } = Astro.props;
 ---
-<div 
-  id="sui-toaster" 
+<div
+  id="sui-toaster"
   class:list={[
     closeButton && "closeable",
     position,
-  ]},
+  ]}
 >
-  <div 
+  <div
     id="sui-toast-drawer"
     data-offset={offset}
     data-gap={gap}

package/dist/components/Toast/toaster.css

@@ -30,11 +30,11 @@
   box-shadow: 0px 4px 8px var(--shadow);
   display: flex;
   flex-direction: column;
-  gap: .5rem;
+  gap: 0.5rem;
   position: relative;
   overflow: hidden;
   margin-bottom: var(--gap);
-  animation: toast-pop-in .25s ease forwards;
+  animation: toast-pop-in 0.25s ease forwards;
   z-index: 90;
 }
 .sui-toast-header {
@@ -46,7 +46,7 @@
 .sui-toast-header-left-side {
   display: flex;
   flex-direction: row;
-  gap: .5rem;
+  gap: 0.5rem;
   align-items: center;
   font-weight: 500;
   font-size: 1.125em;
@@ -61,10 +61,10 @@
   color: var(--warning-base);
 }
 .sui-toast-container.danger .sui-toast-header-left-side svg {
-  color: var(--danger-base);
+  color: var(--danger-vibrant);
 }
 .sui-toast-container.info .sui-toast-header-left-side svg {
-  color: var(--info-base);
+  color: var(--info-vibrant);
 }
 .sui-toast-container.mono .sui-toast-header-left-side svg {
   color: var(--mono-base);
@@ -88,10 +88,10 @@
   background-color: var(--warning-base);
 }
 .sui-toast-container.danger .sui-toast-progress-bar {
-  background-color: var(--danger-base);
+  background-color: var(--danger-vibrant);
 }
 .sui-toast-container.info .sui-toast-progress-bar {
-  background-color: var(--info-base);
+  background-color: var(--info-vibrant);
 }
 .close-icon-container {
   cursor: pointer;
@@ -100,7 +100,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  transition: background-color .15s ease;
+  transition: background-color 0.15s ease;
   border-radius: var(--radius-sm);
 }
 .close-icon-container:hover {
@@ -111,7 +111,7 @@
   outline-offset: 2px;
 }
 .sui-toast-container.closing {
-  animation: toast-closing .25s ease forwards;
+  animation: toast-closing 0.25s ease forwards;
 }
 .sui-toast-container.persistent {
   border: 1px solid var(--primary-base);

package/dist/components/Toast/toaster.js

@@ -31,7 +31,7 @@ class Timer {
     if (!this.id || !this.started || !this.running) return;
     this.running = false;
     clearTimeout(this.id);
-    this.remaining -= (/* @__PURE__ */ new Date()).getTime() - this.started.getTime();
+    this.remaining -= Date.now() - this.started.getTime();
   };
   getTimeLeft = () => {
     if (this.running) {
@@ -117,7 +117,7 @@ function createToast(props) {
   if (!props.persistent) {
     const timer = new Timer(
       () => removeToast(toastID),
-      props.duration || (toastParent.dataset.duration ? Number.parseInt(toastParent.dataset.duration) : 4e3)
+      props.duration || (toastParent.dataset.duration ? Number.parseInt(toastParent.dataset.duration, 10) : 4e3)
     );
     const timerPauseWrapper = () => {
       toastContainer.classList.add("paused");