@studiocms/ui 1.0.0-beta.0 → 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/Group/group.css

@@ -3,17 +3,23 @@
   flex-direction: row;
   align-items: center;
 }
-.sui-group .sui-button:not(:first-child):not(:last-child),
-.sui-group .sui-badge:not(:first-child):not(:last-child) {
+.sui-group > .sui-button:not(:first-child):not(:last-child),
+.sui-group .sui-dropdown-container:not(:first-child):not(:last-child) .sui-button,
+.sui-group > .sui-badge:not(:first-child):not(:last-child) {
   border-radius: 0;
 }
-.sui-group .sui-button:first-child,
-.sui-group .sui-badge:first-child {
+.sui-group > .sui-button:first-child,
+.sui-group .sui-dropdown-container:first-child .sui-button,
+.sui-group > .sui-badge:first-child {
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
 }
-.sui-group .sui-button:last-child,
-.sui-group .sui-badge:last-child {
+.sui-group > .sui-button:last-child,
+.sui-group .sui-dropdown-container:last-child .sui-button,
+.sui-group > .sui-badge:last-child {
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
 }
+.sui-group .sui-button:focus-visible {
+  z-index: 2;
+}

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,7 +1,11 @@
 ---
+// @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';
 import './input.css';
+import { AstroError } from 'astro/errors';
+import Icon from '../Icon/Icon.astro';
 
 /**
  * The props for the input component.
@@ -39,6 +43,19 @@ interface Props extends HTMLAttributes<'input'> {
 	 * Additional classes to apply to the input.
 	 */
 	class?: string;
+	/**
+	 * An optional icon to be shown in the input.
+	 */
+	icon?:
+		| AvailableIcons
+		| {
+				name: AvailableIcons;
+				position: 'left' | 'right';
+		  };
+	/**
+	 * A description to be shown below the input
+	 */
+	description?: string;
 }
 
 const {
@@ -50,26 +67,53 @@ const {
 	isRequired = false,
 	disabled = false,
 	class: className,
+	icon,
+	description,
 	...props
 } = Astro.props;
+
+if (typeof icon === 'object') {
+	if (!icon.name) throw new AstroError('Missing icon name for input!');
+	if (!icon.position) throw new AstroError('Missing icon position for input!');
+
+	if (!['left', 'right'].includes(icon.position))
+		throw new AstroError('Invalid icon position for input!');
+}
+
+const iconPos = icon
+	? typeof icon === 'string' || (typeof icon === 'object' && icon.position === 'left')
+		? 'left'
+		: 'right'
+	: undefined;
 ---
 
 <label for={name} class="sui-input-label" class:list={[disabled && "disabled"]}>
-  {label && (
+	{label && (
 		<span class="label">
 			{label} <span class="req-star">{isRequired && "*"}</span>
 		</span>
 	)}
-  <input
-    placeholder={placeholder}
-    name={name}
-    id={name}
-    type={type}
-    class="sui-input"
-		class:list={[className]}
-    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>
+	)}
 </label>

package/dist/components/Input/input.css

@@ -2,7 +2,8 @@
   width: 100%;
   display: flex;
   flex-direction: column;
-  gap: .25rem;
+  gap: 0.25rem;
+  position: relative;
 }
 .sui-input-label.disabled {
   opacity: 0.5;
@@ -13,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);
@@ -33,6 +35,30 @@
   border: 1px solid var(--border);
 }
 .req-star {
-  color: var(--danger-base);
+  color: var(--danger-vibrant);
   font-weight: 700;
 }
+.sui-input-desc {
+  font-size: 0.825rem;
+}
+.input-icon {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+}
+.input-icon.icon-left {
+  left: 0.5rem;
+}
+.input-icon.icon-right {
+  right: 0.5rem;
+}
+.sui-input.icon-left {
+  padding-left: calc(1.25rem + 20px);
+}
+.sui-input.icon-right {
+  padding-right: calc(1.25rem + 20px);
+}
+.sui-input-wrapper {
+  position: relative;
+  width: 100%;
+}