umberto 7.0.2 → 8.0.1

package/themes/umberto/layout/gloria/_components/nav-tree/_style.scss

@@ -0,0 +1,104 @@
+@use "@gloria/a11y/_mixins.scss" as *;
+
+.c-nav-tree {
+	font-size: var(--font-size-sm);
+	line-height: var(--line-height-base);
+	color: var(--color-secondary-700);
+
+	&--mobile {
+		.c-nav-tree__chevron {
+			transform: translate(-150%, -50%) rotate(0deg);
+		}
+
+		.c-nav-tree__wrapper {
+			&:has( + .c-nav-tree__nested-list:not(.c-nav-tree__nested-list--hidden)) .c-nav-tree__chevron {
+				transform: translate(-150%, -50%) rotate(90deg);
+			}
+		}
+	}
+
+	> li > ul {
+		.c-nav-tree__link,
+		.c-nav-tree__wrapper {
+			padding-left: calc(var(--spacing-6) + var(--spacing-3) * var(--level, 1));
+		}
+	}
+
+	&__link,
+	&__wrapper {
+		position: relative;
+		display: flex;
+		justify-content: space-between;
+		align-items: flex-start;
+		padding: var(--spacing-1-5) var(--spacing-3) var(--spacing-1-5) var(--spacing-6);
+	}
+
+	&__link {
+		transition:
+			background-color var(--duration-normal) var(--cbuc-cubic-out),
+			color var(--duration-normal) var(--cbuc-cubic-out),
+			border-color var(--duration-ultra-fast) var(--smoothstep),
+			box-shadow var(--duration-ultra-fast) var(--smoothstep);
+
+		@include a11y-keyboard-focus-ring(false, true);
+
+		&:hover,
+		&--active {
+			background-color: var(--color-primary-100);
+			color: var(--color-primary-500)
+		}
+
+		&--active {
+			box-shadow: -2px 0px 0px 0px var(--color-primary-300) inset;
+		}
+	}
+
+	&__wrapper {
+		width: 100%;
+		cursor: pointer;
+		transition:
+				background-color var(--duration-normal) var(--cbuc-cubic-out),
+				color var(--duration-normal) var(--cbuc-cubic-out);
+
+		@include a11y-keyboard-focus-ring(false, true);
+
+		&:hover {
+			background-color: var(--color-primary-100);
+			color: var(--color-primary-500)
+		}
+
+		&:has( + .c-nav-tree__nested-list:not(.c-nav-tree__nested-list--hidden)) .c-nav-tree__chevron {
+			transform: translate(-125%, -50%) rotate(90deg);
+		}
+	}
+
+	&__chevron {
+		position: absolute;
+		top: 50%;
+		transform: translate(-125%, -50%) rotate(0deg);
+		transition: transform var(--duration-normal) var(--cbuc-cubic-out);
+		color: var(--color-secondary-700);
+	}
+
+	&__nested-list {
+		overflow: hidden;
+		transition: height var(--duration-normal) var(--smootherstep);
+
+		&--hidden {
+			height: 0;
+		}
+	}
+
+	&__badges {
+		display: flex;
+		flex-wrap: nowrap;
+
+		.c-badge {
+			margin-left: var(--spacing-1);
+		}
+	}
+
+	&__sub-group-title {
+		text-align: left;
+	}
+}

package/themes/umberto/layout/gloria/_components/nav-tree/index.pug

@@ -0,0 +1,6 @@
+include ./nav-tree-level
+
+mixin nav-tree()
+	- const pageGroup = projectLocals.getPageGroup( page.groupId )
+	ul.b-reset-list.c-nav-tree.js-nav-tree
+		+navTreeLevel({ data: pageGroup })

package/themes/umberto/layout/gloria/_components/nav-tree/nav-tree-item.pug

@@ -0,0 +1,27 @@
+mixin navTreeItem( data )
+	-
+		const activeClass = page.path === data.path ? 'c-nav-tree__link--active' : '';
+		const ariaCurrent = page.path === data.path ? 'page' : false;
+		const menuTitle = data[ 'menu-title' ] || uExtractAndCacheTitle( data.source, data.content ).title || data.title;
+
+	li
+		a.b-reset-link.c-nav-tree__link(
+			href=relative_url( page.path, data.path ),
+			class=[activeClass],
+			aria-current=ariaCurrent,
+			title=menuTitle
+		)
+			span.c-nav-tree__guide-title
+				= menuTitle
+
+			-
+				const shouldDisplayNewIndicator = 'shouldDisplayNewIndicator' in data ? data.shouldDisplayNewIndicator : false;
+				const badges = 'badges' in data ? data.badges : false;
+
+			if shouldDisplayNewIndicator || badges
+				span.c-nav-tree__badges
+					- if( shouldDisplayNewIndicator )
+						+badge({ variant: 'status' })
+					- if ( badges )
+						each badge in normalizeBadges( data )
+							+badge({ variant: badge.name })

package/themes/umberto/layout/gloria/_components/nav-tree/nav-tree-level.pug

@@ -0,0 +1,58 @@
+include nav-tree-item
+
+mixin navTreeLevel( { data, isRoot = true, level = 0 } )
+	- if ( !data || !site ) return;
+	- const pages = site.pages.filter( getPagesForNavTree( data.id, page.projectName ) );
+	- const categories = data.categories ? markEmptyCategories( { pages: site.pages, categories: data.categories, projectName: page.projectName, group: page.groupId } ) : [];
+	- let dataArr = [].concat( pages.toArray(), categories ).sort( ( a, b ) => ( a.title || a.name ).localeCompare( b.title || b.name ) );
+	- dataArr.forEach( ( item, idx ) => { item.index = idx; } );
+	//- Default order value is 0, some categories might not have assigned value that's why there is fallback to default value.
+	- dataArr.sort( ( a, b ) => ( a.order || 0 ) === ( b.order || 0 ) ? a.index - b.index : ( a.order || 0 ) - ( b.order || 0 ) );
+	- const shouldPrintSubTree = dataArr.filter( item => item.title || item.hasDescendentLeaf ).length || projectLocals.navigationShowEmptyCategories
+	- const isFolded = 'folded' in data ? !!data.folded : false;
+	- const foldedClass = isFolded ? 'c-nav-tree__nested-list--hidden' : '';
+
+	if isRoot
+		if data.navigationIncludeIndex
+			+navTreeItem( findMainCategoryPage( data.id, page.projectName, site.pages ) )
+
+		each item in dataArr
+			if item.name
+				+navTreeLevel({ data: item, isRoot: false, level: level + 1 })
+			else
+				+navTreeItem( item )
+
+	//- We don't want to display empty categories (#523).
+	else if shouldPrintSubTree
+		- const id = uRandomId( 'nav-tree-item' );
+
+		li
+			button.b-reset-button.c-nav-tree__wrapper.c-nav-tree__group.js-sidebar-button(
+				type='button',
+				'aria-expanded'=''+isFolded+'',
+				'aria-controls'=id,
+				'aria-label'='Expand/Collapse '+data.name
+			)
+				+svg-icon({ icon: 'chevron-right', className: 'c-nav-tree__chevron' })
+				span( class="c-nav-tree__sub-group-title" ) #{ data.name }
+				- const shouldDisplayNewIndicator = 'shouldDisplayNewIndicator' in data ? data.shouldDisplayNewIndicator : false;
+				- const badges = 'badges' in data ? data.badges : false;
+				- if( shouldDisplayNewIndicator || badges )
+						span.c-nav-tree__badges
+							- if( shouldDisplayNewIndicator )
+								+badge({ variant: 'status' })
+							- if ( badges )
+								each badge in normalizeBadges( data )
+									+badge({ variant: badge.name })
+			ul.b-reset-list.c-nav-tree__nested-list(
+				class=foldedClass
+				id=id
+				data-id=data.id
+				'style'=['--level:'+level, isFolded ? 'height: 0px' : ''].join(';')
+			)
+				each item in dataArr
+					//- Categories have a property 'name', guides don't have property 'name'.
+					if item.name
+						+navTreeLevel({ data: item, isRoot: false, level: level + 1 })
+					else
+						+navTreeItem( item )

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

@@ -0,0 +1,22 @@
+.c-skeleton {
+	animation: pulse-code-skeleton 1.2s ease-in-out infinite;
+	background: color-mix(in srgb, var(--color-secondary-800) 10%, transparent);
+	border-radius: var(--radius-1);
+
+	&--line {
+			width: 100%;
+			height: 1.2em;
+	}
+}
+
+.c-skeleton-lines {
+	.c-skeleton:not(:last-child) {
+		margin-bottom: var(--spacing-3);
+	}
+}
+
+@keyframes pulse-code-skeleton {
+	0% { opacity: 0.4; }
+	50% { opacity: 1; }
+	100% { opacity: 0.4; }
+}

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

@@ -0,0 +1,16 @@
+mixin skeleton({ shape, className, width, height })
+	-
+		const style = [
+			width && `width: ${ width }`,
+			height && `height: ${ height }`
+		]
+			.filter( Boolean )
+			.join( '' );
+
+	.c-skeleton(
+		class={
+			[className]: !!className,
+			[`c-skeleton--${ shape }`]: shape
+		}
+		style=style
+	)&attributes(attributes)

package/themes/umberto/layout/gloria/_components/snippet-footer/_style.scss

@@ -0,0 +1,26 @@
+.c-snippet-footer {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	margin-bottom: var(--spacing-4);
+
+	.doc.live-snippet:has(> .ck-editor) + & {
+		margin-top: calc(var(--spacing-3) * -1);
+	}
+
+	&__container {
+		.c-icon-message__icon {
+			color: var(--color-warning-400);
+		}
+
+		.c-icon-message__content {
+			font-size: var(--font-size-sm);
+			color: var(--color-secondary-700);
+
+			.b-paragraph {
+				color: inherit;
+				font-size: inherit;
+			}
+		}
+	}
+}

package/themes/umberto/layout/gloria/_components/snippet-footer/index.pug

@@ -0,0 +1,10 @@
+//- Snippet footer component used to display a message at the bottom of snippet boxes.
+mixin snippet-footer()
+	.c-snippet-footer
+		+icon-message({
+			className: 'c-snippet-footer__container',
+			icon: 'sparkles',
+			iconSize: 'lg',
+			iconPosition: 'left'
+		})
+			block

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

@@ -0,0 +1,9 @@
+.c-spacer {
+	width: calc(var(--spacer-width, 0) * var(--spacing-base));
+	height: calc(var(--spacer-height, 0) * var(--spacing-base));
+}
+
+span.c-spacer {
+	display: inline-block;
+	vertical-align: middle;
+}

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

@@ -0,0 +1,19 @@
+//- Spacer component
+//-
+//- Examples:
+//- +spacer({ x: 2 }) <!-- Creates horizontal space -->
+//- +spacer({ y: 4 }) <!-- Creates vertical space -->
+//- +spacer({ x: 2, y: 2 }) <!-- Uses the larger dimension -->
+mixin spacer({x = 0, y = 0, className = ''})
+	if x > y
+		span.c-spacer(
+			style={'--spacer-width': x},
+			class=className,
+			aria-hidden='true'
+		)
+	else
+		div.c-spacer(
+			style={'--spacer-height': y},
+			class=className,
+			aria-hidden='true'
+		)

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

@@ -0,0 +1,70 @@
+//- SVG inline injection mixin
+//-
+//- This mixin injects inline SVG directly into HTML.
+//- It allows controlling fill color and dimension trimming.
+//-
+//- Example:
+//- +inline-svg({ file: 'logo', fill: 'blue', trimDimensions: true })
+mixin inline-svg({ file, fill, className, trimDimensions = true, width, height, title })
+	-
+		const path = `source/gloria/assets/_img/${ file }.svg`;
+		const titleFallback = title === false ? 'none' : title;
+
+	svg(
+		class=[className],
+		role='img'
+		width=width,
+		height=height,
+		data-inline-svg-image=path,
+		data-inline-svg-title=titleFallback,
+		data-inline-svg-fill-color=fill,
+		data-inline-svg-trim-dimensions=trimDimensions
+	)
+
+//- SVG local spritesheet mixin
+//-
+//- This mixin creates an SVG with <use> element to reference icons from a file.
+//- The referenced SVG will be added to a spritesheet during post-processing.
+//- This approach is ideal for frequently used SVGs to improve performance.
+//-
+//- Example:
+//- +spritesheet-local-svg({ file: 'icon-check', title: 'Zatwierdzone', className: 'icon' })
+mixin spritesheet-local-svg({ file, className, width, height, title })
+	-
+		const path = `source/gloria/assets/_img/${ file }.svg`;
+		const titleId = title && uRandomId( 'spritesheet-svg' );
+		const iconId = file.replace(/\//g, '-');
+
+	svg(
+		class=[className],
+		role='img',
+		width=width,
+		height=height,
+		aria-labelledby=title ? titleId : false,
+		data-spritesheet-svg=path,
+		data-spritesheet-id=iconId
+	)
+		if title
+			title(id=titleId)= title
+		use(href=`#${iconId}`, data-skip-validation='')
+
+//- SVG spritesheet preload mixin
+//-
+//- This mixin creates a hidden element that signals to the spritesheet generator
+//- to include an SVG in the spritesheet, even if not yet visible on the page.
+//- Useful for icons that will be dynamically added via JavaScript.
+//-
+//- Example:
+//- +preload-spritesheet-svg({ file: 'icons/menu' })
+mixin preload-spritesheet-svg({ file })
+	-
+		const path = `source/gloria/assets/_img/${ file }.svg`;
+		const iconId = file.replace(/\//g, '-');
+
+	i(
+		class="spritesheet-preload"
+		style="display: none;"
+		data-spritesheet-preload="true"
+		data-spritesheet-svg=path
+		data-spritesheet-id=iconId
+	)

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

@@ -0,0 +1,80 @@
+@use "@gloria/a11y/_mixins.scss" as *;
+
+.c-tabs {
+	margin-block: var(--spacing-6);
+
+	&__list {
+		display: flex;
+		list-style: none;
+		padding: 0;
+		margin: 0;
+		border-bottom: 1px solid var(--color-gray-500);
+		white-space: nowrap;
+
+		&--center {
+			justify-content: center;
+		}
+
+		&--right {
+			justify-content: flex-end;
+		}
+	}
+
+	&__button {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		gap: var(--spacing-1-5);
+		position: relative;
+		padding: var(--spacing-2) var(--spacing-4);
+		font-family: var(--font-family-text);
+		font-size: var(--font-size-base);
+		font-weight: var(--font-weight-semibold);
+		line-height: var(--line-height-xs);
+		color: var(--color-text-secondary);
+		transition:
+			border-color var(--duration-ultra-fast) var(--smoothstep),
+			box-shadow var(--duration-ultra-fast) var(--smoothstep),
+			color var(--duration-fast) var(--cbuc-quad-out),
+			background-color var(--duration-fast) var (--cbuc-quad-out);
+
+		@include a11y-keyboard-focus-ring(false);
+
+		&:hover {
+			background-color: var(--color-primary-100);
+			color: var(--color-primary);
+		}
+
+		&:active {
+			background-color: var(--color-primary-200);
+			color: var(--color-primary);
+		}
+
+		&::after {
+			content: "";
+			position: absolute;
+			bottom: 0;
+			left: 0;
+			width: 100%;
+			height: 2px;
+			background-color: transparent;
+			transition: background-color var(--duration-ultra-fast) var(--smoothstep);
+		}
+
+		&[aria-selected="true"] {
+			color: var(--color-primary-500);
+
+			&::after {
+				background-color: var(--color-primary-500);
+			}
+		}
+	}
+
+	&__panel {
+		@include a11y-keyboard-focus-ring;
+
+		&.is-spaced {
+			padding-top: var(--spacing-6);
+		}
+	}
+}

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

@@ -0,0 +1,81 @@
+//- Tabs component
+//-
+//- Examples:
+//- Basic usage:
+//- +tabs()
+//-   +tab({ id: 'tab1', label: 'First Tab', active: true })
+//-     p This is the content of the first tab.
+//-   +tab({ id: 'tab2', label: 'Second Tab' })
+//-     p This is the content of the second tab.
+//-
+//- With custom options:
+//- +tabs({ ariaLabel: 'My Custom Tabs', className: 'custom-tabs', align: 'center' })
+//-   +tab({ id: 'tab1', label: 'First Tab', tooltip: 'Additional info', active: true })
+//-     p This is the content of the first tab with tooltip.
+//-   +tab({ id: 'tab2', label: 'Second Tab', spaced: false })
+//-     p This is the content of the second tab without spacing.
+mixin tabs({ id: tabsId, ariaLabel = 'Tabbed content', className, align = 'left' } = {})
+	-
+		const idPrefix = uRandomId( 'tabs' );
+		const tabs = {};
+
+	mixin tab({ id, label, tooltip, className, active = false, spaced = true } = {})
+		-
+			id = id || uRandomId( 'tab' );
+
+			if (tabs[ id ]) {
+				throw new Error('Tab ID must be unique and defined');
+			}
+
+			tabs[ id ] = {
+				label,
+				active,
+				className,
+				spaced,
+				tooltip,
+				contentBlock: block
+			}
+
+	- block ? block() : undefined;
+
+	.c-tabs.js-tabs(class=className, aria-label=ariaLabel, id=tabsId)
+		ol.c-tabs__list.b-reset-list(
+			role="tablist",
+			class={
+				[`c-tabs__list--${ align }`]: !!align
+			}
+		)
+			each tab, id in tabs
+				li.c-tabs__list-item(role="presentation")
+					button.c-tabs__button.b-reset-button(
+						role="tab"
+						aria-label=tab.tooltip ? `${ tab.label } - ${ tab.tooltip }` : tab.label
+						aria-controls=`${ idPrefix }-${ id }-panel`
+						aria-selected=tab.active ? 'true' : 'false'
+						id=`${idPrefix}-${ id }-tab`
+						data-tab-id=id
+					)
+						span= tab.label
+
+						if tab.tooltip
+							+svg-icon({
+								icon: 'info-circle',
+								tooltip: tab.tooltip
+							})
+
+		each tab, id in tabs
+			.c-tabs__panel(
+				id=`${idPrefix}-${ id }-panel`
+				role="tabpanel"
+				aria-labelledby=`${idPrefix}-${ id }-tab`
+				aria-hidden=tab.active ? 'false' : 'true'
+				data-tab-id=id
+				class={
+					[className]: !!className,
+					'is-spaced': tab.spaced,
+					'is-active': tab.active,
+					'is-hidden': !tab.active
+				}
+			)
+				if tab.contentBlock
+					- tab.contentBlock()

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

@@ -0,0 +1,79 @@
+
+.tag {
+	display: inline-flex;
+	align-items: center;
+	padding: 0 var(--spacing-2);
+	white-space: nowrap;
+	flex-wrap: nowrap;
+	border: 1px solid var(--color-gray-400);
+	border-radius: var(--radius-1);
+	color: var(--color-secondary-700);
+
+	&--link {
+		color: var(--color-primary-500);
+		border-color: var(--color-primary-500);
+		text-decoration: none;
+		transition: background-color var(--duration-normal) ease;
+
+		&:hover {
+			background-color: var(--color-primary-100);
+		}
+	}
+
+	&__icon {
+
+		+ .tag__text {
+			padding-left: var(--spacing-1);
+		}
+	}
+
+	&__text {
+		font-size: var(--font-size-xs);
+		font-weight: var(--font-weight-semibold);
+		line-height: 1;
+		text-transform: capitalize;
+		padding: var(--spacing-1-5) 0;
+	}
+
+	&--api {
+		border: none;
+		border-radius: 0;
+
+		&-class {
+			color: var(--color-info-600);
+			background-color: var(--color-info-100);
+		}
+
+		&-interface {
+			color: var(--color-green-700);
+			background-color: var(--color-green-50);
+		}
+
+		&-module {
+			color: var(--color-rose-800);
+			background-color: var(--color-rose-50);
+		}
+
+		&-typedef {
+			color: var(--color-cyan-700);
+			background-color: var(--color-cyan-50);
+		}
+
+		.tag__text {
+			font-weight: var(--font-weight-bold);
+			line-height: 1;
+			font-size: var(--font-size-sm);
+			padding-left: var(--spacing-1);
+
+			&--capitalize {
+				text-transform: capitalize;
+			}
+		}
+	}
+
+	&-wrapper {
+		display: inline-flex;
+		align-items: center;
+		gap: var(--spacing-2);
+	}
+}

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

@@ -0,0 +1,17 @@
+mixin tag({label, icon, iconSize = 'base', href = false, className = ''})
+	if href
+		a.tag.tag--link( href=href, class=className )
+			if icon
+				+svg-icon({ icon, className: 'tag__icon', size: iconSize })
+			span.tag__text #{ label }
+	else
+		span.tag(class=className)
+			if icon
+				+svg-icon({ icon, className: 'tag__icon', size: iconSize })
+			span.tag__text #{ label }
+
+
+mixin tagWrapper()
+	div.tag-wrapper
+		if block
+			block