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

package/dist/components/Accordion/accordion.css

@@ -15,7 +15,7 @@
   overflow: hidden;
 }
 .sui-accordion-item[data-open=true] > .sui-accordion-details {
-  bottom: .25rem;
+  bottom: 0.25rem;
   grid-template-rows: 1fr;
 }
 .sui-accordion-content {
@@ -46,11 +46,11 @@
   color: var(--text-normal);
   display: flex;
   flex-direction: row;
-  gap: .5rem;
+  gap: 0.5rem;
   align-items: center;
-  padding-left: .5rem;
-  padding-bottom: .5rem;
-  padding-top: .5rem;
+  padding-left: 0.5rem;
+  padding-bottom: 0.5rem;
+  padding-top: 0.5rem;
   user-select: none;
   width: 100%;
   border: none;
@@ -63,7 +63,7 @@
   outline-offset: 2px;
 }
 .sui-summary-chevron {
-  transition: all .3s ease;
+  transition: all 0.3s ease;
 }
 .sui-accordion-item[data-open=true] > .sui-accordion-summary .sui-summary-chevron {
   transform: rotate(90deg);

package/dist/components/Badge/Badge.astro

@@ -5,6 +5,15 @@ import type { AvailableIcons } from 'studiocms:ui/icons';
 import type { HTMLAttributes } from 'astro/types';
 import Icon from '../Icon/Icon.astro';
 
+/**
+ * The variant of the badge.
+ */
+type BadgeVariant = 'flat' | 'outlined';
+/**
+ * @deprecated The `default` variant is deprecated and will be removed in a future release. Use `flat` or `outlined` instead.
+ */
+type DeprecatedBadgeVariants = 'default';
+
 interface Props extends Omit<HTMLAttributes<'span'>, 'color'> {
 	/**
 	 * The color of the badge. Defaults to `primary`.
@@ -23,9 +32,9 @@ interface Props extends Omit<HTMLAttributes<'span'>, 'color'> {
 	 */
 	size?: 'sm' | 'md' | 'lg';
 	/**
-	 * The variant of the badge. Defaults to `default`.
+	 * The variant of the badge. Defaults to `outlined`. The `default` variant is deprecated and will be removed in a future release.
 	 */
-	variant?: 'default' | 'flat' | 'outline';
+	variant?: BadgeVariant | DeprecatedBadgeVariants;
 	/**
 	 * The rounding of the badge. Full is a half-circle, semi is a quarter-circle. Defaults to `full`.
 	 */
@@ -40,7 +49,7 @@ const {
 	color = 'primary',
 	icon,
 	size = 'md',
-	variant = 'default',
+	variant = 'outlined',
 	rounding = 'full',
 	iconPosition = 'left',
 	label,

package/dist/components/Badge/badge.css

@@ -1,98 +1,68 @@
 .sui-badge {
   display: flex;
   flex-direction: row;
-  gap: .5rem;
+  gap: 0.5rem;
   align-items: center;
-  padding: .125rem .75rem;
+  padding: 0.125rem 0.75rem;
   border-radius: var(--radius-full);
-  font-size: .875rem;
+  font-size: 0.875rem;
 }
 .sui-badge.semi {
   border-radius: var(--radius-md);
 }
-.sui-badge.primary {
-  background-color: var(--primary-base);
-  color: var(--text-inverted);
-}
 .sui-badge.primary.flat,
 .sui-badge.primary.outlined {
   background-color: var(--primary-flat);
-  color: var(--primary-base);
+  color: var(--text-normal);
 }
 .sui-badge.primary.outlined {
-  border: 1px solid var(--primary-base);
-}
-.sui-badge.success {
-  background-color: var(--success-base);
-  color: var(--text-inverted);
+  border: 1px solid var(--primary-vibrant);
 }
 .sui-badge.success.flat,
 .sui-badge.success.outlined {
   background-color: var(--success-flat);
-  color: var(--success-base);
+  color: var(--text-normal);
 }
 .sui-badge.success.outlined {
   border: 1px solid var(--success-base);
 }
-.sui-badge.warning {
-  background-color: var(--warning-base);
-  color: var(--text-inverted);
-}
 .sui-badge.warning.flat,
 .sui-badge.warning.outlined {
   background-color: var(--warning-flat);
-  color: var(--warning-base);
+  color: var(--text-normal);
 }
 .sui-badge.warning.outlined {
   border: 1px solid var(--warning-base);
 }
-.sui-badge.danger {
-  background-color: var(--danger-base);
-  color: var(--text-normal);
-}
 .sui-badge.danger.flat,
 .sui-badge.danger.outlined {
   background-color: var(--danger-flat);
-  color: var(--danger-base);
+  color: var(--text-normal);
 }
 .sui-badge.danger.outlined {
-  border: 1px solid var(--danger-base);
-}
-.sui-badge.info {
-  background-color: var(--info-base);
-  color: var(--text-normal);
+  border: 1px solid var(--danger-vibrant);
 }
 .sui-badge.info.flat,
 .sui-badge.info.outlined {
   background-color: var(--info-flat);
-  color: var(--info-base);
+  color: var(--text-normal);
 }
 .sui-badge.info.outlined {
-  border: 1px solid var(--info-base);
-}
-.sui-badge.mono {
-  background-color: var(--mono-base);
-  color: var(--text-inverted);
+  border: 1px solid var(--info-vibrant);
 }
 .sui-badge.mono.flat,
 .sui-badge.mono.outlined {
   background-color: var(--mono-flat);
-  color: var(--mono-base);
+  color: var(--text-normal);
 }
 .sui-badge.mono.outlined {
   border: 1px solid var(--mono-base);
 }
-[data-theme=light] .sui-badge.danger {
-  color: var(--text-inverted);
-}
-[data-theme=light] .sui-badge.info {
-  color: var(--text-inverted);
-}
 .sui-badge.sm {
-  padding: .125rem .75rem;
+  padding: 0.125rem 0.75rem;
 }
 .sui-badge.sm {
-  font-size: .75rem;
+  font-size: 0.75rem;
 }
 .sui-badge.sm > svg {
   width: 14px;
@@ -100,7 +70,7 @@
 }
 .sui-badge.lg {
   font-size: 1rem;
-  padding: .25rem 1rem;
+  padding: 0.25rem 1rem;
 }
 .sui-badge.lg {
   font-size: 1rem;

package/dist/components/Breadcrumbs/breadcrumbs.css

@@ -1,13 +1,13 @@
 .sui-breadcrumbs {
   display: flex;
   flex-direction: row;
-  gap: .25rem;
+  gap: 0.25rem;
 }
 .sui-breadcrumbs > *:last-child {
   display: none;
 }
 .sui-breadcrumbs a {
-  color: var(--primary-base);
+  color: var(--primary-hover);
   text-decoration: none;
 }
 .sui-breadcrumbs a:hover {

package/dist/components/Center/Center.astro

@@ -1,7 +1,7 @@
 ---
 import './center.css';
 ---
-<!-- This was made for Jumper, to keep him happy <3 -->
+{/* This was made for Jumper, to keep him happy <3 */}
 <div class="sui-center">
   <slot />
 </div>

package/dist/components/Checkbox/Checkbox.astro

@@ -59,7 +59,7 @@ const iconSizes = {
 	lg: 24,
 };
 ---
-<label 
+<label
   class="sui-checkmark-label"
   for={name}
   class:list={[
@@ -72,9 +72,9 @@ const iconSizes = {
     class="sui-checkmark-container"
     tabindex="0"
     role="checkbox"
-    aria-checked={defaultChecked} 
+    aria-checked={defaultChecked || "false"}
     aria-labelledby={`label-${name}`}
-    >
+  >
     <Checkmark
       class={'sui-checkmark'}
       width={iconSizes[size]}
@@ -88,8 +88,9 @@ const iconSizes = {
       disabled={disabled}
       required={isRequired}
       class="sui-checkbox"
-	  value={value}
+      value={value}
       hidden
+      aria-checked={defaultChecked || "false"}
     />
   </div>
   <span id={`label-${name}`}>
@@ -97,5 +98,5 @@ const iconSizes = {
   </span>
 </label>
 <script>
-import "studiocms:ui/scripts/checkbox"
+import "studiocms:ui/scripts/checkbox";
 </script>

package/dist/components/Checkbox/checkbox.css

@@ -2,9 +2,9 @@
   display: flex;
   flex-direction: row;
   align-items: center;
-  gap: .5rem;
+  gap: 0.5rem;
   position: relative;
-  margin: .25rem 0;
+  margin: 0.25rem 0;
 }
 .sui-checkmark-label.disabled {
   opacity: 0.5;
@@ -20,9 +20,9 @@
   border-radius: var(--radius-md);
   cursor: pointer;
   transition:
-    background-color .15s,
-    border .15s,
-    transform .15s;
+    background-color 0.15s,
+    border 0.15s,
+    transform 0.15s;
   transition-timing-function: ease;
 }
 .sui-checkmark-container:focus-visible {
@@ -37,7 +37,7 @@
   scale: 0.9;
 }
 .sui-checkmark-label.sm {
-  font-size: .875em;
+  font-size: 0.875em;
 }
 .sui-checkmark-label.sm .sui-checkmark-container {
   width: 1.25rem;
@@ -53,7 +53,7 @@
 .sui-checkmark-label.lg .sui-checkmark-container {
   width: 1.75rem;
   height: 1.75rem;
-  padding: .125rem;
+  padding: 0.125rem;
 }
 .primary .sui-checkmark-container:has(.sui-checkbox:checked) {
   border-color: var(--primary-base);
@@ -80,7 +80,7 @@
   background-color: var(--mono-base);
 }
 .req-star {
-  color: var(--danger-base);
+  color: var(--danger-vibrant);
   font-weight: 700;
 }
 .sui-checkbox {
@@ -91,7 +91,7 @@
   margin: 0;
 }
 .sui-checkmark polyline {
-  transition: all .15s ease;
+  transition: all 0.15s ease;
   color: var(--text-normal);
 }
 .primary .sui-checkmark polyline {

package/dist/components/Checkbox/checkbox.js

@@ -17,6 +17,7 @@ function loadCheckboxes() {
     box.dataset.initialized = "true";
     box.addEventListener("change", (e) => {
       box.parentElement.ariaChecked = e.target.checked ? "true" : "false";
+      box.ariaChecked = e.target.checked ? "true" : "false";
     });
   }
 }

package/dist/components/Dropdown/dropdown.css

@@ -5,7 +5,7 @@
   position: relative;
   display: flex;
   flex-direction: column;
-  gap: .25rem;
+  gap: 0.25rem;
 }
 .sui-dropdown {
   position: absolute;
@@ -68,17 +68,17 @@
   }
 }
 .sui-dropdown.initialized {
-  animation: pop-down .15s ease forwards;
+  animation: pop-down 0.15s ease forwards;
 }
 .sui-dropdown.initialized.active {
   display: flex;
   border: 1px solid var(--border);
   height: auto;
   pointer-events: all;
-  animation: pop-up .15s ease forwards;
+  animation: pop-up 0.15s ease forwards;
 }
 .sui-dropdown.initialized.below {
-  top: calc(100% + .25rem + var(--offset)) !important;
+  top: calc(100% + 0.25rem + var(--offset)) !important;
   bottom: auto;
   transform-origin: top center;
 }
@@ -90,7 +90,7 @@
 }
 .sui-dropdown.above {
   top: auto;
-  bottom: calc(100% + .25rem + var(--offset)) !important;
+  bottom: calc(100% + 0.25rem + var(--offset)) !important;
   transform-origin: bottom center;
 }
 .sui-dropdown.above.start {
@@ -101,8 +101,8 @@
 }
 .sui-dropdown-option {
   cursor: pointer;
-  font-size: .975em;
-  transition: all .15s ease;
+  font-size: 0.975em;
+  transition: all 0.15s ease;
   display: flex;
   flex-direction: row;
   align-items: center;
@@ -114,9 +114,9 @@
   display: flex;
   flex-direction: row;
   align-items: center;
-  padding: .5rem .75rem;
+  padding: 0.5rem 0.75rem;
   width: 100%;
-  gap: .5rem;
+  gap: 0.5rem;
 }
 .sui-dropdown-option:hover,
 .sui-dropdown-option:focus,
@@ -153,14 +153,14 @@
   color: var(--text-dark);
 }
 .sui-dropdown-option.danger {
-  color: var(--danger-base);
+  color: var(--danger-vibrant);
 }
 .sui-dropdown-option.danger:hover {
   background-color: var(--danger-base);
   color: var(--text-light);
 }
 .sui-dropdown-option.info {
-  color: var(--info-base);
+  color: var(--info-vibrant);
 }
 .sui-dropdown-option.info:hover {
   background-color: var(--info-base);
@@ -181,5 +181,5 @@
   justify-content: space-between;
 }
 .sui-dropdown-option.has-icon .sui-dropdown-line-container {
-  padding-left: .5rem;
+  padding-left: 0.5rem;
 }

package/dist/components/Footer/footer.css

@@ -24,6 +24,9 @@ footer.sui-footer {
   margin: 0 !important;
   padding: 0 !important;
 }
+.links ul > li {
+  margin-bottom: 0.5rem;
+}
 .links ul li,
 .links ul li * {
   color: var(--text-normal) !important;
@@ -35,6 +38,7 @@ footer.sui-footer {
 .sui-footer-link-label {
   font-size: 1.125em;
   font-weight: 700;
+  margin-bottom: 0.75rem !important;
 }
 .separator {
   height: 1px;

package/dist/components/Icon/Icon.astro

@@ -1,11 +1,13 @@
 ---
-// @ts-ignore - This is a TypeGenerated Module, available in dev thanks to manual d.ts file - This comment is here because this causes a type-error during build
-import { type AvailableIcons, type IconCollections, iconCollections } from 'studiocms:ui/icons';
-// @ts-ignore - This is a TypeGenerated Module, available in dev thanks to manual d.ts file - This comment is here because this causes a type-error during build
-import * as Icons from 'studiocms:ui/icons';
+import {
+	type AvailableIcons,
+	collections,
+	type IconCollections,
+	iconCollections,
+} from 'studiocms:ui/icons';
 import type { HTMLAttributes } from 'astro/types';
+import { errorHintBuilder, StudioCMS_UI_IconError } from './errors.js';
 import IconBase from './IconBase.astro';
-import { StudioCMS_UI_IconError, errorHintBuilder } from './errors.js';
 
 /**
  * Props interface for the Icon component.
@@ -45,6 +47,7 @@ const { name: __name, height, width, ...rest } = Astro.props;
  */
 const _nameSplit = __name.split(':');
 
+/* v8 ignore start */
 /**
  * Checks if the icon name contains a colon and if the split name length is not equal to 1.
  * If both conditions are met, throws a StudioCMS_UI_IconError with a message indicating an invalid icon name.
@@ -60,6 +63,7 @@ if (__name.includes(':') && _nameSplit.length !== 2) {
 		errorHintBuilder({ iconCollections, prefix: '', iconName: __name })
 	);
 }
+/* v8 ignore stop */
 
 /**
  * Extracts the prefix from the `_nameSplit` array and casts it to the `IconCollections` type.
@@ -83,8 +87,9 @@ const name: AvailableIcons = _nameSplit[1] as AvailableIcons;
  * @constant
  * @param {string} prefix - The prefix used to identify the icon collection.
  */
-const iconCollection = Icons[prefix];
+const iconCollection = collections[prefix];
 
+/* v8 ignore start */
 /**
  * Validates the provided icon collection prefix and throws an error if it is invalid.
  *
@@ -101,7 +106,9 @@ if (!prefix || !iconCollections.includes(prefix) || !iconCollection) {
 		errorHintBuilder({ iconCollections, prefix, iconName: name })
 	);
 }
+/* v8 ignore stop */
 
+/* v8 ignore start */
 /**
  * Throws an error if the icon name is invalid.
  *
@@ -117,5 +124,6 @@ if (!name) {
 		errorHintBuilder({ iconCollections, prefix, iconName: name })
 	);
 }
+/* v8 ignore stop */
 ---
 <IconBase {iconCollection} {name} {prefix} {...rest} {height} {width} />

package/dist/components/Icon/IconBase.astro

@@ -89,6 +89,7 @@ const attributes = props as SVGAttributes;
  */
 const iconData = getIconData(iconCollection, name);
 
+/* v8 ignore start */
 /**
  * Throws an error if the icon data is missing from the collection.
  *
@@ -105,6 +106,7 @@ if (!iconData) {
 		`Icon "${name}" is missing in ${iconCollection.prefix} collection`
 	);
 }
+/* v8 ignore stop */
 
 /**
  * Converts icon data to SVG format and renders it with specified attributes.

package/dist/components/Input/Input.astro

@@ -1,5 +1,5 @@
 ---
-// @ts-ignore - This is a TypeGenerated Module, available in dev thanks to manual d.ts file - This comment is here because this causes a type-error during build
+// @ts-expect-error - This is a TypeGenerated Module, available in dev thanks to manual d.ts file - This comment is here because this causes a type-error during build
 import { type AvailableIcons } from 'studiocms:ui/icons';
 import type { HTMLAttributes } from 'astro/types';
 import { generateID } from '../../utils/generateID.js';
@@ -88,29 +88,31 @@ const iconPos = icon
 ---
 
 <label for={name} class="sui-input-label" class:list={[disabled && "disabled"]}>
-  {label && (
+	{label && (
 		<span class="label">
 			{label} <span class="req-star">{isRequired && "*"}</span>
 		</span>
 	)}
-	{typeof icon === "string" && (
-		<Icon name={icon} width={20} height={20} class="input-icon icon-left" />
-	)}
-	{typeof icon === "object" && (
-		<Icon name={icon.name} width={20} height={20} class="input-icon" class:list={[`icon-${iconPos}`]}  />
-	)}
-  <input
-    placeholder={placeholder}
-    name={name}
-    id={name}
-    type={type}
-    class="sui-input"
-		class:list={[className, iconPos && `has-icon icon-${iconPos}`]}
-    required={isRequired}
-    disabled={disabled}
-    value={defaultValue}
-		{...props}
-  />
+	<div class="sui-input-wrapper">
+		{typeof icon === "object" && (
+			<Icon name={icon.name} width={20} height={20} class="input-icon" class:list={[`icon-${iconPos}`]} />
+		)}
+		{typeof icon === "string" && (
+			<Icon name={icon} width={20} height={20} class="input-icon icon-left" />
+		)}
+		<input
+			placeholder={placeholder}
+			name={name}
+			id={name}
+			type={type}
+			class="sui-input"
+			class:list={[className, iconPos && `icon-${iconPos}`]}
+			required={isRequired}
+			disabled={disabled}
+			value={defaultValue}
+			{...props}
+		/>
+	</div>
 	{description && (
 		<span class="sui-input-desc">{description}</span>
 	)}

package/dist/components/Input/input.css

@@ -2,7 +2,7 @@
   width: 100%;
   display: flex;
   flex-direction: column;
-  gap: .25rem;
+  gap: 0.25rem;
   position: relative;
 }
 .sui-input-label.disabled {
@@ -14,12 +14,13 @@
   font-size: 14px;
 }
 .sui-input {
-  padding: .5rem 1rem;
+  padding: 0.5rem 1rem;
   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;
+  width: 100%;
 }
 .sui-input:hover {
   background: var(--background-step-3);
@@ -34,11 +35,11 @@
   border: 1px solid var(--border);
 }
 .req-star {
-  color: var(--danger-base);
+  color: var(--danger-vibrant);
   font-weight: 700;
 }
 .sui-input-desc {
-  font-size: .825rem;
+  font-size: 0.825rem;
 }
 .input-icon {
   position: absolute;
@@ -46,23 +47,18 @@
   transform: translateY(-50%);
 }
 .input-icon.icon-left {
-  left: 0.75rem;
+  left: 0.5rem;
 }
 .input-icon.icon-right {
-  right: 0.75rem;
-}
-.label + .input-icon {
-  top: calc(50% + 14px);
-}
-.label + .input-icon:has(~ .sui-input-desc) {
-  top: calc(50%);
+  right: 0.5rem;
 }
-.input-icon:has(~ .sui-input-desc):not(.label + .input-icon) {
-  top: calc(50% - 14px);
+.sui-input.icon-left {
+  padding-left: calc(1.25rem + 20px);
 }
-.sui-input.has-icon.icon-left {
-  padding-left: calc(1.5rem + 20px);
+.sui-input.icon-right {
+  padding-right: calc(1.25rem + 20px);
 }
-.sui-input.has-icon.icon-right {
-  padding-right: calc(1.5rem + 20px);
+.sui-input-wrapper {
+  position: relative;
+  width: 100%;
 }

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 {