umberto 7.0.2 → 8.0.1

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

@@ -0,0 +1,75 @@
+//- Code block component
+//-
+//- Examples:
+//- +code-block({ language: 'js', code: 'console.log("Hello world!");' })
+//- +code-block({ language: 'typescript', code: 'const message: string = "Hello world!";\nconsole.log(message);', className: 'my-code-block' })
+mixin code-block({ id: codeBlockId, language = 'js', code = '', skeletonLines, highlightOnMount = true, className, copyable = true , scrollable = false })
+	-
+		const id = codeBlockId || uRandomId( 'code-block' );
+		let safeCode = (
+			( code || '' )
+				.replace( /^```\w*(\s*\n)/, '$1' ) // Remove opening ```js but keep the newline
+				.replace( /(\n\s*)```\s*$/, '$1' ) // Remove closing ``` but keep the newline
+				.replace( /</g, '&lt;' ).replace( />/g, '&gt;' )
+		);
+
+		// Do not break ascii arts.
+		if ( ![  'none', 'plaintext', 'plain', 'raw' ].includes( language ) ) {
+			safeCode = safeCode.trim();
+		}
+
+	.c-code-block(
+		id=id,
+		class={
+			[className]: !!className,
+			'c-code-block--scrollable': scrollable,
+			[`c-code-block--${language}`]: !!language
+		},
+		data-copyable=copyable,
+		data-highlight-on-mount=highlightOnMount ? 'true' : 'false',
+		data-status='loading'
+	)
+		pre.c-code-block__pre
+			code(class=language)
+				= safeCode
+
+		.c-code-block__skeleton.c-skeleton-lines
+			-
+				const widths = [ '70%', '80%', '60%', '75%', '45%', '80%', '65%', '90%', '70%', '50%' ];
+				const approxCodeLineScale = 0.75; // Approximate scale for code lines to match the height of the code block.
+
+				let codeLines = skeletonLines || 0;
+
+				if ( !codeLines ) {
+					if ( safeCode ) {
+						codeLines = Math.max( 1, Math.floor( safeCode.trim().split('\n').length * approxCodeLineScale ) );
+					} else {
+						codeLines = 4;
+					}
+				}
+
+				if (scrollable) {
+					codeLines = Math.min( codeLines, 5 );
+				}
+
+				const skeletonWidths = (new Array(codeLines)).fill(null).map( ( _, i ) => widths[ i % widths.length ] );
+
+			each width in skeletonWidths
+				+skeleton({ shape: 'line', width })
+
+		if copyable
+			- const tooltipId = uRandomId( 'tooltip' );
+
+			button.b-reset-button.c-code-block__copy-button(
+				type="button",
+				aria-labelledby=tooltipId
+			)
+				+svg-icon({ icon: 'copy', className: 'c-code-block__copy-icon', ariaHidden: true })
+				+svg-icon({ icon: 'check', className: 'c-code-block__check-icon', ariaHidden: true })
+
+			+tooltip-popover({
+				id: tooltipId,
+				text: 'Copy code',
+				position: 'top',
+				mode: 'hover'
+			})

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

@@ -0,0 +1,36 @@
+.c-code-switcher {
+	padding: var(--spacing-2);
+	background-color: var(--color-gray-200);
+	border: 1px solid var(--color-gray-500);
+	border-radius: var(--radius-1);
+	overflow: hidden;
+
+	&:not(:last-child) {
+		margin: var(--spacing-7) 0;
+	}
+
+	.c-tabs {
+		margin: 0;
+	}
+
+	.c-code-block {
+		padding: var(--spacing-4) var(--spacing-2);
+		margin: 0;
+		border-radius: 0;
+
+		&__skeleton,
+		&__pre {
+			padding: 0;
+		}
+
+		&:not(.c-code-block--has-vertical-scroll) .c-code-block__copy-button {
+			right: var(--spacing-1);
+		}
+
+		&--has-vertical-scroll {
+			.c-code-block__copy-button {
+				right: var(--spacing-5);
+			}
+		}
+	}
+}

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

@@ -0,0 +1,31 @@
+//- Code switcher component
+//-
+//- Examples:
+//- +code-switcher({ className: 'my-switcher', storageSwitcherKey: 'my-switcher-key' })
+//-   +code-tab({ id: 'js', label: 'JavaScript', active: true, code: 'console.log("Hello world!");', language: 'js' })
+//-   +code-tab({ id: 'ts', label: 'TypeScript', code: 'const message: string = "Hello world!";\nconsole.log(message);', language: 'typescript' })
+//-   +code-tab({ id: 'loading', label: 'Loading', skeleton: true })
+mixin code-switcher({ id: codeSwitcherId, className, skeletonLines, storageSwitcherKey } = {})
+	mixin code-tab({ id, label, tooltip, className, active = false, code, language = 'js', skeleton = false, copyable = false })
+		- const loading = !!skeleton || !code;
+
+		+tab({
+			spaced: false,
+			id,
+			label,
+			className,
+			active,
+			tooltip
+		})
+			if loading
+				+code-block({ code: '', language, copyable, skeletonLines, highlightOnMount: false, scrollable: true })
+			else
+				+code-block({ code, language, copyable, skeletonLines, scrollable: true })
+
+	.c-code-switcher(
+		id=codeSwitcherId
+		class=className
+		data-storage-switcher-key=storageSwitcherKey
+	)&attributes(attributes)
+		+tabs()
+			block

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

@@ -0,0 +1,54 @@
+@use "@gloria/layout/_mixins.scss" as *;
+
+.c-columns {
+	display: grid;
+	grid-template-columns: repeat(var(--columns-count, 2), 1fr);
+	gap: var(--columns-gap, var(--spacing-4));
+	width: 100%;
+
+	&:not(:last-child) {
+		margin-bottom: var(--spacing-3);
+	}
+  
+	// Responsive behavior
+	@include mobile {
+	  grid-template-columns: 1fr;
+	  --columns-count: 1;
+	}
+  
+	// Column size variants
+	&--2 {
+	  @include desktop {
+		--columns-count: 2;
+	  }
+	}
+  
+	&--3 {
+	  @include desktop {
+		--columns-count: 3;
+	  }
+	}
+  
+	&--4 {
+	  @include min-width($breakpoint-lg) {
+		--columns-count: 4;
+	  }
+	}
+  
+	// Gap size variants
+	&--gap-sm {
+	  --columns-gap: var(--spacing-2);
+	}
+  
+	&--gap-md {
+	  --columns-gap: var(--spacing-4);
+	}
+  
+	&--gap-lg {
+	  --columns-gap: var(--spacing-8);
+	}
+  
+	&--gap-xl {
+	  --columns-gap: var(--spacing-12);
+	}
+  }

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

@@ -0,0 +1,30 @@
+//- Columns Component Usage Examples
+//-
+//- Basic two-column layout:
+//- +columns({ number: 2 })
+//-   .column-1
+//-     | First column content
+//-   .column-2
+//-     | Second column content
+//-
+//- Three-column layout with custom gap:
+//- +columns({ number: 3, gap: '2rem' })
+//-   .column-1
+//-     | First column content
+//-   .column-2
+//-     | Second column content
+//-   .column-3
+//-     | Third column content
+
+mixin columns({ number = 2, gap = 'var(--spacing-4)', className } = {})
+	-
+		const columnsId = uRandomId('columns');
+		const columnsClass = `c-columns c-columns--${number}`;
+
+	.c-columns(
+		id=columnsId,
+		class=className,
+		class=columnsClass,
+		style=`--columns-gap: ${gap}; --columns-count: ${number};`
+	)&attributes(attributes)
+		block

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

@@ -0,0 +1,6 @@
+.c-divider {
+	border: none;
+	border-top: 1px solid var(--color-gray-400);
+	width: 100%;
+	margin: var(--c-divider-spacing, 0) 0;
+}

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

@@ -0,0 +1,13 @@
+//- Divider component
+//-
+//- Examples:
+//- +divider
+//- +divider({ spacing: 8 })
+//- +divider({ spacing: 24, className: 'custom-divider' })
+mixin divider({ spacing = 16, className })
+	- const customSpacing = `--c-divider-spacing: var(--spacing-${spacing})`;
+
+	hr.c-divider(
+		class=className,
+		style=customSpacing
+	)&attributes(attributes)

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

@@ -0,0 +1,88 @@
+@use "@gloria/a11y/_mixins.scss" as *;
+
+.c-dropdown {
+	--dropdown-anim-transform-offset: 10px;
+
+	position: relative;
+	display: inline-block;
+
+	&__content {
+		position: absolute;
+		min-width: 200px;
+		max-height: 310px;
+		overflow-y: auto;
+		background-color: var(--color-gray-100);
+		border: 1px solid var(--color-gray-500);
+		border-radius: var(--radius-1);
+		z-index: 100;
+		opacity: 0;
+		visibility: hidden;
+		transition:
+			opacity var(--duration-fast) var(--cbuc-cubic-out),
+			transform var(--duration-fast) var(--ease-bounce-out),
+			visibility 0s linear var(--duration-fast);
+
+		&--position-bottom {
+			top: 100%;
+			margin-top: 0.5rem;
+			transform: translateY(calc(var(--dropdown-anim-transform-offset) * -1));
+			transform-origin: top center;
+		}
+
+		&--position-top {
+			bottom: 100%;
+			margin-bottom: 0.5rem;
+			transform: translateY(var(--dropdown-anim-transform-offset));
+			transform-origin: bottom center;
+		}
+
+		&--open {
+			opacity: 1;
+			visibility: visible;
+			transform: translateY(0);
+			transition: opacity var(--duration-fast) var(--cbuc-cubic-out), transform var(--duration-fast) var(--ease-bounce-out), visibility 0s;
+		}
+
+		& > li {
+			list-style: none;
+		}
+
+		&:has(.c-dropdown__item--narrow) {
+			min-width: auto;
+			padding: var(--spacing-1) 0;
+		}
+	}
+
+	&__item {
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		padding: var(--spacing-2) var(--spacing-6);
+		cursor: pointer;
+		border: 1px solid transparent;
+		color: var(--color-text-primary);
+		white-space: nowrap;
+		transition:
+			background-color var(--duration-fast) var(--cbuc-quad-out),
+			color var(--duration-fast) var(--cbuc-quad-out),
+			border-color var(--duration-ultra-fast) var(--smoothstep),
+			box-shadow var(--duration-ultra-fast) var (--smoothstep);
+
+		@include a11y-keyboard-focus-ring;
+
+		&.is-highlighted,
+		&:hover {
+			background-color: var(--color-primary-100);
+		}
+
+		&.is-active,
+		&:active {
+			background-color: var(--color-primary-100);
+			color: var(--color-primary);
+		}
+
+		&--narrow {
+			padding: var(--spacing-1) var(--spacing-3);
+		}
+	}
+}

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

@@ -0,0 +1,77 @@
+//- Dropdown component
+//-
+//- Examples:
+//- - const dropdownId = uRandomId('dropdown');
+//- +dropdown({ preferredDirection: 'down', id: dropdownId, updateValueOnSelect: true })
+//-   +trigger
+//-     +button({ label: 'Select option', icon: 'github' })(aria-haspopup='true', aria-controls=dropdownId)
+//-   +content
+//-     +dropdown-item({ label: 'Item 1', value: 'item1' })
+//-     +dropdown-item({ label: 'Item 2', value: 'item2' })
+//-     +dropdown-item({ label: 'Item 3', value: 'item3' })
+//-
+//- - const anotherDropdownId = uRandomId('dropdown');
+//- +dropdown({ preferredDirection: 'up', id: anotherDropdownId })
+//-   +trigger
+//-     +button({ label: 'Dropdown up', icon: 'github' })(aria-haspopup='true', aria-controls=anotherDropdownId)
+//-   +content
+//-     +dropdown-item({ label: 'Item 1', active: true })
+//-     +dropdown-item({ label: 'Item 2' })
+mixin dropdown({ id: dropdownId, className, preferredDirection, contentId, updateValueOnSelect } = {})
+	- const slots = {};
+
+	mixin trigger
+		- slots.trigger = block
+
+	mixin content
+		- slots.content = block
+
+	- block ? block() : undefined;
+
+	.c-dropdown(
+		id=dropdownId,
+		class=[className],
+		data-preferred-direction=preferredDirection,
+		data-update-value-on-select=updateValueOnSelect ? '' : false
+	)&attributes(attributes)
+		- slots.trigger ? slots.trigger() : undefined
+
+		ol.b-reset-list.c-dropdown__content.u-drop-shadow-1(
+			id=contentId,
+			role='menu',
+			aria-hidden='true'
+		)
+			- slots.content ? slots.content() : undefined
+
+//- Dropdown Item component
+//-
+//- Examples:
+//- +dropdown-item({ label: 'Simple item' })
+//- +dropdown-item({ label: 'Active item', active: true })
+//- +dropdown-item({ label: 'Item with value', value: 'custom-value' })
+//- +dropdown-item({ label: 'Item with icon', icon: 'github' })
+//- +dropdown-item({ label: 'Custom link', href: '/custom-link' })
+//- +dropdown-item({ label: 'With ID', itemId: 'special-item' })
+mixin dropdown-item({ itemId, href, active = false, narrow, label, icon, value } = {})
+	- const tag = href ? 'a' : 'div';
+
+	li.c-dropdown__list-item
+		#{tag}.b-reset-link.c-dropdown__item(
+			role='menuitem',
+			href=href,
+			class={
+				'is-active': active,
+				'c-dropdown__item--narrow': !!narrow
+			},
+			data-item-id=itemId,
+			data-value=value,
+			tabindex='-1'
+		)
+			if icon
+				+svg-icon({ icon })
+				+spacer({ x: 2 })
+
+			if block
+				block
+			else
+				span= label

package/themes/umberto/layout/gloria/_components/fake-devtools/_style.scss

@@ -0,0 +1,233 @@
+@use "@gloria/base/_mixins.scss" as *;
+
+.c-fake-devtools {
+	margin: var(--spacing-4) 0 var(--spacing-16);
+
+	&:last-child {
+		margin-bottom: 0;
+	}
+
+	&__logs {
+		display: flex;
+		flex-direction: column;
+		gap: var(--spacing-2);
+		font-size: var(--font-size-sm);
+		max-height: 400px;
+		overflow-y: auto;
+		padding: var(--spacing-2);
+
+		@include scrollbar;
+
+		&:not(:empty) + .c-fake-devtools__skeleton {
+			display: none;
+		}
+	}
+
+	&__log {
+		border-radius: var(--radius-1);
+		padding: var(--spacing-2) var(--spacing-4);
+		line-height: 1.4;
+		display: flex;
+		align-items: flex-start;
+		gap: var(--spacing-2);
+
+		&:first-child {
+			margin-top: var(--spacing-2);
+		}
+
+		&--info {
+			background-color: var(--color-info-100);
+			color: var(--color-info-700);
+			border-left: 3px solid var(--color-info-500);
+
+			.c-fake-devtools__log-icon {
+				color: var(--color-info-600);
+			}
+		}
+
+		&--warning {
+			background-color: var(--color-warning-100);
+			color: var(--color-warning-700);
+			border-left: 3px solid var(--color-warning-500);
+
+			.c-fake-devtools__log-icon {
+				color: var(--color-warning-600);
+			}
+		}
+
+		&--error {
+			background-color: var(--color-error-50);
+			color: var(--color-error-700);
+			border-left: 3px solid var(--color-error-500);
+
+			.c-fake-devtools__log-icon {
+				color: var(--color-error-600);
+			}
+		}
+
+		&-icon {
+			position: relative;
+			top: 1.5px;
+			flex-shrink: 0;
+			font-size: var(--font-size-base);
+		}
+
+		&-content {
+			flex: 1;
+			white-space: break-spaces;
+    		word-break: break-all;
+		}
+
+		&-text {
+			&--error {
+				color: var(--color-error-700);
+				font-weight: bold;
+			}
+
+			&--warning {
+				color: var(--color-warning-700);
+				font-weight: bold;
+			}
+
+			&--bold {
+				font-weight: bold;
+			}
+
+			&--default {
+				font-style: italic;
+			}
+		}
+	}
+
+	&__link {
+		color: rgba(0, 0, 0, 0.6);
+		text-decoration: underline;
+		word-break: break-all;
+		cursor: pointer;
+
+		&:hover {
+			color: rgba(0, 0, 0, 0.8);
+		}
+	}
+}
+
+.c-log-text-truncator {
+	display: inline;
+	margin-right: var(--spacing-3);
+
+	&__expand-button {
+		color: var(--color-primary-600);
+		text-decoration: underline;
+		cursor: pointer;
+		font-size: inherit;
+		background: none;
+		border: none;
+		padding: 0;
+		margin: 0;
+
+		&:hover {
+			color: var(--color-primary-700);
+		}
+
+		&:focus {
+			outline: 2px solid var(--color-primary-300);
+			outline-offset: 1px;
+		}
+	}
+}
+
+object-viewer {
+	display:contents;
+}
+
+.c-object-viewer {
+	display: inline-block;
+	margin: 0 var(--spacing-4);
+	vertical-align: top;
+	font-family: var(--font-family-monospace);
+	font-size: 0.78rem;
+	cursor: pointer;
+
+	&__object, &__array {
+		margin: var(--spacing-1) 0;
+	}
+
+	&__property {
+		display: grid;
+		grid-template-columns: auto 1fr;
+		align-items: flex-start;
+		gap: var(--spacing-1);
+		padding: var(--spacing-1) 0;
+	}
+
+	&__preview {
+		color: var(--color-gray-800);
+		font-style: italic;
+	}
+
+	&__toggle {
+		display: inline-block;
+		width: 12px;
+		color: var(--color-secondary-700);
+		cursor: pointer;
+		user-select: none;
+
+		&:before {
+			content: '►';
+			font-size: 10px;
+		}
+
+		&--expanded:before {
+			content: '▼';
+		}
+	}
+
+	&__key {
+		color: var(--color-secondary-700);
+		margin-right: 4px;
+
+		&:after {
+			content: ": ";
+		}
+	}
+
+	&__content {
+		padding-left: var(--spacing-8);
+		grid-column: 1 / -1;
+
+		&--hidden {
+			display: none;
+		}
+	}
+
+	&__brace, &__array-bracket {
+		color: var(--color-secondary-700);
+	}
+
+	&__string {
+		color: var(--color-green-800);
+	}
+
+	&__number {
+		color: var(--color-blue-800);
+	}
+
+	&__boolean {
+		color: var(--color-blue-800);
+	}
+
+	&__null, &__undefined {
+		color: var(--color-gray-800);
+		font-style: italic;
+	}
+
+	&__function {
+		color: var(--color-secondary-700);
+		font-style: italic;
+	}
+
+	&__date {
+		color: var(--color-secondary-700);
+		font-style: italic;
+	}
+}

package/themes/umberto/layout/gloria/_components/fake-devtools/index.pug

@@ -0,0 +1,27 @@
+mixin fake-devtools({ id, maxLogs = 200, className = '' })
+	//- Preload the SVG icons needed for log messages generated by JS
+	+preload-svg-spritesheet-icon({ icon: "info-circle" })
+	+preload-svg-spritesheet-icon({ icon: "warning" })
+	+preload-svg-spritesheet-icon({ icon: "exclamation-circle" })
+
+	.c-fake-devtools(
+		id=id,
+		class=className,
+		data-max-logs=maxLogs,
+	)
+		+tabs({
+			ariaLabel: 'DevTools console simulation'
+		})
+			+tab({
+				id: 'console',
+				label: 'JS Console',
+				active: true,
+				spaced: false,
+				tooltip: 'JS Console is simulation of the DevTools console',
+			})
+				.c-fake-devtools__logs(tabindex='-1')
+				.c-fake-devtools__skeleton.c-skeleton-lines
+					- const widths = ['60%', '75%', '45%', '80%', '65%', '90%', '70%']
+
+					each width in widths
+						+skeleton({ shape: 'line', width })

package/themes/umberto/layout/gloria/_components/heading-badge/index.pug

@@ -0,0 +1,17 @@
+//- Heading Badge Component Usage Example
+//- +heading-badge({ text: 'Featured', className: 'custom-heading', level: 2, headingId: 'featured-section', badge: { variant: 'premium' } })
+//-   | Optional additional content
+
+mixin heading-badge({ text, className, level = 3, headingId, badge } = {})
+	#{`h${level}`}.u-display-inline-flex.u-align-items-center.u-gap-2(
+		id=headingId,
+		class={
+			[`b-h${level}`]: !!level,
+			[className]: !!className
+		}
+	)
+		span
+			block
+
+		if badge
+			+badge({ variant: badge })