umberto 7.0.2 → 8.0.0

package/themes/umberto/layout/gloria/_components/callout/index.pug

@@ -0,0 +1,87 @@
+//- Callout component
+//-
+//- Examples:
+//- +callout({ variant: 'info' })
+//-   p This is an informational note.
+//-
+//- +callout({ variant: 'warning' })
+//-   p This is a warning message that requires attention.
+//-
+//- +callout({ variant: 'error' })
+//-   p This is an error message indicating a problem.
+//-
+//- +callout({ variant: 'success' })
+//-   p This is a success message.
+mixin callout({ variant })
+	-
+		const VARIANTS = {
+			// Legacy
+			info: {
+				className: 'c-callout--info',
+				icon: 'info-circle',
+				title: 'Note',
+				role: 'note'
+			},
+			warning: {
+				className: 'c-callout--warning',
+				icon: 'exclamation-circle',
+				title: 'Warning',
+				role: 'alert'
+			},
+			error: {
+				className: 'c-callout--rose',
+				icon: 'close-circle',
+				title: 'Danger',
+				role: 'alert'
+			},
+			success: {
+				className: 'c-callout--success',
+				icon: 'check-circle',
+				title: 'Success',
+				role: 'note'
+			},
+
+			// New
+			note: {
+				className: 'c-callout--info',
+				icon: 'info-circle',
+				title: 'Note',
+				role: 'note'
+			},
+			tip: {
+				className: 'c-callout--success',
+				icon: 'bulb',
+				title: 'Tip',
+				role: 'note'
+			},
+			important: {
+				className: 'c-callout--blue',
+				icon: 'notification',
+				title: 'Important',
+				role: 'alert'
+			},
+			caution: {
+				className: 'c-callout--rose',
+				icon: 'close-circle',
+				title: 'Caution',
+				role: 'alert'
+			}
+		};
+
+		const { icon, title, role, className } = VARIANTS[variant] || VARIANTS.info;
+		const ids = {
+			title: uRandomId( 'callout-title' ),
+			content: uRandomId( 'callout-content' )
+		};
+
+	.c-callout(
+		class=[className]
+		role=role
+		aria-labelledby=ids.title
+		aria-describedby=ids.content
+	)&attributes(attributes)
+		+icon-message({ icon, className: 'c-callout__title' })(id=ids.title)
+			= title
+
+		.c-callout__content(id=ids.content)
+			block

package/themes/umberto/layout/gloria/_components/card/_style.scss

@@ -0,0 +1,101 @@
+@use "@gloria/a11y/_mixins.scss" as *;
+
+.c-card {
+	display: flex;
+	flex-direction: column;
+	gap: var(--spacing-6);
+	padding: var(--spacing-4);
+	border: 1px solid var(--color-gray-400);
+	border-radius: var(--radius-1);
+	background-color: var(--color-common-white);
+	overflow: hidden;
+
+	&__title {
+		font-size: var(--font-size-md);
+		line-height: var(--line-height-md);
+		font-weight: var(--font-weight-bolder);
+		color: var(--color-text-primary);
+
+		&-heading {
+			font-family: var(--font-family-heading);
+			font-size: var(--font-size-base);
+			font-weight: var(--font-weight-bold);
+			margin: var(--spacing-0);
+		}
+	}
+
+	&__description {
+		height: auto;
+		font-size: var(--font-size-base);
+		line-height: var(--line-height-base);
+		color: var(--color-text-primary);
+		flex: 1 0 auto;
+	}
+
+	&__footer {
+		flex: 0 0 auto;
+	}
+
+	&__learn-more {
+		&-toggle {
+			display: flex;
+			align-items: center;
+			gap: var(--spacing-3);
+			color: var(--color-primary);
+			font-weight: var(--font-weight-regular);
+			font-size: var(--font-size-sm);
+			line-height: var(--line-height-md);
+			transition: color var(--duration-ultra-fast) var(--smoothstep);
+
+			@include a11y-keyboard-focus-ring;
+
+			&:hover {
+				color: var(--color-primary-700);
+			}
+
+			&:active {
+				color: var(--color-primary-800);
+			}
+
+			&[aria-expanded="true"] .c-card__learn-more-icon {
+				transform: rotate(-90deg);
+			}
+		}
+
+		&-icon {
+			transform: rotate(90deg);
+			transition: transform var(--duration-fast) var(--cbuc-quad-out);
+		}
+
+		&-content {
+			visibility: hidden;
+			height: var(--spacing-0);
+			overflow: hidden;
+			opacity: 0;
+			font-size: var(--font-size-sm);
+			transition:
+				height var(--duration-normal) var(--cbuc-quad-out),
+				opacity var(--duration-normal) var(--cbuc-quad-out);
+
+			&.is-expanded {
+				visibility: visible;
+				height: auto;
+				opacity: 1;
+			}
+		}
+	}
+
+	&__cover {
+		aspect-ratio: 16 / 9;
+		border-radius: var(--radius-1);
+		overflow: hidden;
+		background-color: var(--color-gray-300);
+
+		&-image {
+			width: 100%;
+			height: 100%;
+			object-fit: cover;
+			object-position: center;
+		}
+	}
+}

package/themes/umberto/layout/gloria/_components/card/index.pug

@@ -0,0 +1,131 @@
+//- Card Component Usage Examples
+//-
+//- Basic card with title and description:
+//- +card
+//-   +card-title
+//-     | Card Title
+//-   +card-description
+//-     | Card description text
+//-
+//- Card with cover image:
+//- +card
+//-   +card-cover({ src: "image.jpg", alt: "Description" })
+//-   +card-title
+//-     | Card with Image
+//-   +card-description
+//-     | Description text
+//-
+//- Card with linked title:
+//- +card
+//-   +card-title({ href: "/link" })
+//-     | Clickable Title
+//-   +card-description
+//-     | Click the title to navigate
+//-
+//- Card with expandable learn more section:
+//- +card
+//-   +card-title
+//-     | Advanced Card
+//-   +card-description
+//-     | Brief description
+//-   +card-learn-more
+//-     p More detailed information here
+//-     ul
+//-       li Additional point 1
+//-       li Additional point 2
+//-
+//- Complete card example:
+//- +card({ className: "custom-card", ariaLabel: "Custom card label" })
+//-   +card-cover({ src: "cover.jpg", alt: "Cover image", loading: "eager" })
+//-   +card-title({ href: "/article", className: "featured" })
+//-     | Featured Article
+//-   +card-description({ className: "excerpt" })
+//-     | This is a featured article with additional content available.
+//-   +card-learn-more({ expanded: false })
+//-     h4 Additional Information
+//-     p Detailed content that expands when the user clicks "Learn more"
+//-     a(href="/full-article") Read full article
+
+mixin card({ className, ariaLabel } = {})
+	-
+		const cardId = uRandomId('card');
+		const titleId = uRandomId('card-title');
+		const descriptionId = uRandomId('card-description');
+		const footerId = uRandomId('card-footer');
+
+	mixin card-cover({ id, src, alt = '', loading = 'lazy', className } = {})
+		.c-card__cover(
+			id=id,
+			class=className
+		)&attributes(attributes)
+			img.c-card__cover-image(
+				src=src
+				alt=alt
+				loading=loading
+			)
+
+	mixin card-title({ headingId, className, href, level = 3 } = {})
+		.c-card__title(
+			class=className
+		)&attributes(attributes)
+			#{`h${level}`}.no-transform.c-card__title-heading(id=headingId)
+				if href
+					a.b-link.c-card__title-link.js-link-preload(href=href)
+						block
+				else
+					block
+
+	mixin card-description({ className } = {})
+		.c-card__description(
+			id=descriptionId,
+			class=className
+		)&attributes(attributes)
+			block
+
+	mixin card-footer({ className } = {})
+		.c-card__footer(
+			id=footerId
+			class=className
+		)&attributes(attributes)
+			block
+
+	mixin card-learn-more({ id, className, expanded = false } = {})
+		-
+			const learnMoreId = uRandomId('learn-more');
+			const learnMoreButtonId = uRandomId('learn-more-button');
+
+		.c-card__learn-more.js-expandable(
+			id=id,
+			class=className
+		)&attributes(attributes)
+			button.c-card__learn-more-toggle.b-reset-button(
+				id=learnMoreButtonId
+				aria-expanded=expanded ? 'true' : 'false'
+				aria-controls=learnMoreId
+			)
+				span Learn more
+				+svg-icon({
+					icon: 'chevron-right',
+					className: 'c-card__learn-more-icon',
+					ariaHidden: true
+				})
+
+			.c-card__learn-more-content(
+				id=learnMoreId
+				class={
+					'is-expanded': expanded
+				}
+				tabindex='-1'
+				aria-hidden='true'
+				aria-labelledby=learnMoreButtonId
+			)
+				block
+
+	.c-card(
+		id=cardId
+		class=className
+		aria-label=ariaLabel
+		aria-labelledby=ariaLabel ? null : titleId
+		aria-describedby=descriptionId
+	)&attributes(attributes)
+		block

package/themes/umberto/layout/gloria/_components/card-learn-more-links/_style.scss

@@ -0,0 +1,9 @@
+.c-learn-more-links {
+	margin: var(--spacing-5) 0 0 0;
+	padding: 0;
+	list-style-type: none;
+
+	&__item:not(:last-child) {
+		margin-bottom: var(--spacing-4);
+	}
+}

package/themes/umberto/layout/gloria/_components/card-learn-more-links/index.pug

@@ -0,0 +1,56 @@
+//- Card Learn More Links Component Usage Examples
+//-
+//- Basic links list:
+//- +card-learn-more-links
+//-   +card-learn-more-link({
+//-     href: "/guide",
+//-     text: "User Guide"
+//-   })
+//-   +card-learn-more-link({
+//-     href: "/api",
+//-     text: "API Reference"
+//-   })
+//-
+//- Links with descriptions:
+//- +card-learn-more-links
+//-   +card-learn-more-link({
+//-     href: "/getting-started",
+//-     text: "Getting Started",
+//-     description: "Learn the basics and set up your first project"
+//-   })
+//-   +card-learn-more-link({
+//-     href: "/advanced",
+//-     text: "Advanced Features",
+//-     description: "Explore powerful features for experienced users"
+//-   })
+//-
+//- Links with custom styling and validation skipping:
+//- +card-learn-more-links({ className: "custom-links" })
+//-   +card-learn-more-link({
+//-     href: "/external-link",
+//-     text: "External Resource",
+//-     description: "Link to external documentation",
+//-     skipValidation: true,
+//-     className: "external"
+//-   })
+mixin card-learn-more-links({ id, className } = {})
+	ul.c-learn-more-links(
+		id=id,
+		class=className
+	)&attributes(attributes)
+		block
+
+mixin card-learn-more-link({ id, className, href, skipValidation, text, description  })
+	li.c-learn-more-links__item(
+		id=id,
+		class=className
+	)&attributes(attributes)
+		a.b-link.c-learn-more-links__item-link(
+			href=href,
+			data-skip-validation=skipValidation
+		)
+			= text
+
+		if description
+			.c-learn-more-links__item-description.u-color-text--secondary
+				= description

package/themes/umberto/layout/gloria/_components/checkbox/_style.scss

@@ -0,0 +1,117 @@
+@use "@gloria/a11y/_mixins.scss" as *;
+
+.c-checkbox {
+	display: inline-flex;
+	align-items: baseline;
+	position: relative;
+	cursor: pointer;
+	user-select: none;
+
+	&--expanded {
+		display: flex;
+	}
+
+	&--radio {
+		.c-checkbox__box {
+			position: relative;
+			border-radius: 50%;
+		}
+
+		.c-checkbox__input:checked ~ .c-checkbox__label .c-checkbox__box::after {
+			content: '';
+			position: absolute;
+			top: 50%;
+			left: 50%;
+			transform: translate(-50%, -50%);
+			display: block;
+			width: 10px;
+			height: 10px;
+			border-radius: 50%;
+			background-color: var(--color-common-white);
+		}
+	}
+
+	&__input {
+		position: absolute;
+		opacity: 0;
+		height: 20px;
+		width: 20px;
+		margin: 0;
+		cursor: pointer;
+		z-index: 1;
+		left: 0;
+
+		&:focus-visible ~ .c-checkbox__label .c-checkbox__box {
+			@include a11y-focus-ring-outline;
+		}
+
+		&:checked:disabled ~ .c-checkbox__label .c-checkbox__box {
+			background-color: var(--color-secondary-light-disabled);
+			border-color: var(--color-secondary-light-disabled);
+		}
+
+		&:checked ~ .c-checkbox__label .c-checkbox__box {
+			background-color: var(--color-primary-500);
+			border-color: var(--color-primary-500);
+
+			.c-checkbox__icon {
+				opacity: 1;
+			}
+		}
+
+		&:disabled ~ .c-checkbox__label {
+			cursor: not-allowed;
+			color: var(--color-text-disabled);
+
+			.c-checkbox__box {
+				background-color: var(--color-secondary-100-disabled);
+				border-color: var(--color-secondary-300);
+			}
+		}
+	}
+
+	&__label {
+		display: inline-flex;
+		align-items: center;
+		cursor: pointer;
+		font-family: var(--font-family-text);
+		font-size: var(--font-size-base);
+		color: var(--color-text-primary);
+	}
+
+	&__box {
+		position: relative;
+		top: 1px;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 20px;
+		height: 20px;
+		min-width: 20px;
+		border: var(--radius-0-5) solid var(--color-gray-400);
+		border-radius: var(--radius-1);
+		background-color: var(--color-common-white);
+
+		@include a11y-focus-transitions(
+			background-color var(--duration-fast) var(--cbuc-quad-out),
+			transform var(--duration-fast) var(--cbuc-quad-out)
+		);
+	}
+
+	&__icon {
+		position: relative;
+		top: -1px;
+		width: 14px;
+		height: 14px;
+		color: var(--color-common-white);
+		opacity: 0;
+		transform: scale(0.8);
+		transition:
+		opacity var(--duration-fast) var(--cbuc-quad-out),
+		transform var(--duration-fast) var(--cbuc-quad-out);
+	}
+
+	&__text {
+		margin-left: var(--spacing-3);
+	}
+}

package/themes/umberto/layout/gloria/_components/checkbox/index.pug

@@ -0,0 +1,35 @@
+//- Checkbox component
+//-
+//- Examples:
+//- +checkbox({ name: 'terms', label: 'I agree to the terms and conditions' })
+//- +checkbox({ name: 'newsletter', label: 'Subscribe to newsletter', checked: true })
+//- +checkbox({ name: 'disabled', label: 'Disabled checkbox', disabled: true })
+mixin checkbox({ id, label, type = 'checkbox', name, expanded, className, checked, disabled, required, value = false } = {})
+	- const safeInputId = uRandomId(type);
+
+	.c-checkbox(
+		id=id,
+		class={
+			[className]: !!className,
+			'c-checkbox--expanded': expanded,
+			'c-checkbox--radio': type === 'radio'
+		}
+	)
+		input.c-checkbox__input(
+			type=type
+			name=name
+			id=safeInputId
+			checked=checked
+			disabled=disabled
+			required=required
+			value=value
+		)&attributes(attributes)
+
+		label.c-checkbox__label(for=safeInputId)
+			span.c-checkbox__box
+				if type !== 'radio'
+					+svg-icon({ icon: 'check', ariaHidden: true, className: 'c-checkbox__icon' })
+			if label
+				span.c-checkbox__text= label
+			else
+				block

package/themes/umberto/layout/gloria/_components/cke5-code-switcher/index.pug

@@ -0,0 +1,39 @@
+//- CKEditor 5 code switcher component
+//-
+//- Examples:
+//- +cke5-code-switcher({
+//-   className: 'my-cke5-switcher',
+//-   code: 'import { Editor } from \'ckeditor5\';\n\nconst editor = new Editor();'
+//- })
+mixin cke5-code-switcher({ className, code })
+	-
+		function switchToCdn( originalContent ) {
+			const newContent = originalContent
+				.replace( /import {/g, 'const {' )
+				.replace( /} from/g, '} =' )
+				.replace( /'ckeditor5';/g, 'CKEDITOR;' )
+				.replace( /'ckeditor5-premium-features'/g, 'CKEDITOR_PREMIUM_FEATURES' )
+				.replace( ' // Or \'GPL\'.', '' );
+
+			return newContent;
+		}
+
+	+code-switcher({ className, storageSwitcherKey: 'cke5-code-switcher' })
+		+code-tab({
+			id: 'npm',
+			language: 'js',
+			label: 'NPM',
+			tooltip: 'Show import snippets for npm and ZIP setups.',
+			active: true,
+			copyable: true,
+			code
+		})
+
+		+code-tab({
+			id: 'cdn',
+			language: 'js',
+			label: 'CDN',
+			tooltip: 'Show import snippets for CDN setups.',
+			code: switchToCdn( code ),
+			copyable: true
+		})

package/themes/umberto/layout/gloria/_components/code-block/_style.scss

@@ -0,0 +1,111 @@
+@use "@gloria/base/_mixins.scss" as *;
+@use "@gloria/a11y/_mixins.scss" as *;
+
+.c-code-block {
+	position: relative;
+	margin: var(--spacing-7) 0;
+	background-color: var(--color-gray-200);
+	border-radius: var(--radius-1);
+	overflow: hidden;
+
+	&:not(:first-child) {
+		border: 1px solid var(--color-gray-500);
+	}
+
+	&:last-child {
+		margin-bottom: 0;
+	}
+
+	&--scrollable pre {
+		max-height: min(80vh, 500px);
+		overflow-y: auto;
+	}
+
+	&--has-vertical-scroll .c-code-block__copy-button {
+		right: var(--spacing-5);
+	}
+
+	&[data-status="ready"],
+	&[data-status="success"] {
+		pre					{ display: block; }
+		.c-skeleton-lines	{ display: none; }
+	}
+
+	&[data-status="loading"] {
+		.c-skeleton-lines {
+			display: block;
+		}
+
+		pre, .c-code-block__copy-button {
+			display: none;
+		}
+	}
+
+	pre,
+	&__skeleton {
+		padding: var(--spacing-4);
+	}
+
+	pre {
+		overflow: auto;
+		margin: 0;
+		background: inherit !important;
+
+		@include a11y-keyboard-focus-ring;
+		@include scrollbar;
+	}
+
+	code {
+		display: block;
+		font-family: var(--font-family-monospace);
+		font-size: var(--font-size-sm);
+		line-height: var(--line-height-base);
+		counter-reset: step;
+  		counter-increment: step 0;
+	}
+
+	&__copy-button {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		position: absolute;
+		width: 28px;
+		height: 28px;
+		top: var(--spacing-4);
+		right: var(--spacing-4);
+		padding: var(--spacing-1);
+		font-size: var(--font-size-lg);
+		opacity: 0.6;
+
+		@include a11y-keyboard-focus-ring( true, false, opacity 0.2s var(--cbuc-quad-in) );
+
+		&:hover {
+			opacity: 1;
+		}
+
+		.c-code-block__check-icon {
+			display: none;
+			color: var(--color-success);
+		}
+
+		.c-code-block__copy-icon {
+			color: var(--color-gray-800);
+		}
+
+		&--success {
+			.c-code-block__copy-icon {
+				display: none;
+			}
+
+			.c-code-block__check-icon {
+				display: block;
+			}
+		}
+	}
+
+	.b-inline-code {
+		margin: 0;
+		padding: 0;
+		background-color: transparent;
+	}
+}