umberto 7.0.2 → 8.0.0

package/themes/umberto/layout/gloria/_components/heading-link/_style.scss

@@ -0,0 +1,47 @@
+@use "@gloria/layout/_mixins.scss" as *;
+@use "@gloria/a11y/_mixins.scss" as *;
+
+.c-heading-link {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	opacity: 0;
+	padding: 0.25rem 0.45rem;
+	color: var(--color-gray-700);
+
+	@include a11y-keyboard-focus-ring( true, false,
+		opacity var(--duration-normal) var(--cbuc-cubic-out),
+		color var(--duration-normal) var(--cbuc-cubic-out)
+	);
+
+	&.has-tooltip-visible {
+		opacity: 1;
+	}
+
+	&:hover {
+		color: var(--color-primary-500);
+	}
+
+	&:focus,
+	&:active {
+		color: var(--color-primary-600);
+	}
+
+	@include mobile {
+		display: none;
+	}
+}
+
+.b-heading:has(.c-heading-link) {
+	display: flex;
+	flex-direction: row;
+	align-items: baseline;
+	position: relative;
+
+	&:hover,
+	&:focus-within {
+		.c-heading-link {
+			opacity: 1;
+		}
+	}
+}

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

@@ -0,0 +1,26 @@
+//- Heading link component
+//-
+//- Examples:
+//- h2#introduction
+//-   | Introduction
+//-   +heading-link({ headingId: 'introduction' })
+//-
+//- h2#getting-started
+//-   | Getting Started
+//-   +heading-link({ headingId: 'getting-started' })
+
+mixin heading-link({ headingId })
+	- const tooltipId = uRandomId( 'tooltip' );
+
+	a.b-link.c-heading-link.js-heading-link(
+		href=`#${headingId}`,
+		aria-labelledby=tooltipId,
+	)
+		+svg-icon({ icon: 'link', size: 'base', ariaHidden: true })
+
+	+tooltip-popover({
+		id: tooltipId,
+		text: 'Copy link',
+		position: 'top',
+		mode: 'hover'
+	})

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

@@ -0,0 +1,12 @@
+.c-icon {
+	display: inline-block;
+	vertical-align: middle;
+	aspect-ratio: 1;
+	width: 1em;
+	height: 1em;
+	line-height: 1em;
+}
+
+svg-icon {
+	display: inline-flex;
+}

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

@@ -0,0 +1,75 @@
+//- SVG Icon component
+//-
+//- Examples:
+//- +svg-icon({ icon: 'github' })
+//- +svg-icon({ icon: 'github', size: 'lg' })
+//- +svg-icon({ icon: 'github', fill: 'red' })
+//- +svg-icon({ icon: 'github', className: 'custom-icon' })
+//- +svg-icon({ icon: 'github', trimDimensions: false })
+mixin svg-icon({ icon, size, tooltip, className, title, ariaHidden = false, inline = true, fill = 'currentColor', trimDimensions = true })
+	-
+		const tooltipId = tooltip && uRandomId( 'tooltip' );
+		const fallbackTitle = (
+			ariaHidden || tooltip
+				? null
+				: (title || `${ uCapitalize( icon ) } icon`)
+		);
+
+	i.c-icon(
+		class={
+			 [`u-text--${ size }`]: size,
+			[`c-icon--${ icon }`]: icon,
+			[className]: !!className
+		},
+		aria-hidden=(ariaHidden && 'true'),
+		aria-labelledby=tooltip ? tooltipId : false,
+	)&attributes(attributes)
+		if fill === 'currentColor'
+			+spritesheet-local-svg({
+				file: `icons/${ icon }`,
+				title: fallbackTitle
+			})
+		else
+			+inline-svg({
+				file: `icons/${ icon }`,
+				fill,
+				trimDimensions,
+				title: fallbackTitle
+			})
+
+	if tooltip
+		+tooltip-popover({
+			id: tooltipId,
+			text: tooltip,
+			position: 'top'
+		})
+
+//- Runtime SVG Icon component (uses web component)
+//-
+//- This mixin creates a <svg-icon> custom element that will be rendered by JavaScript.
+//- Use this when you need dynamic icon rendering or when working with client-side templates.
+//-
+//- Examples:
+//- +runtime-svg-icon({ icon: 'github' })
+//- +runtime-svg-icon({ icon: 'github', size: 'lg' })
+//- +runtime-svg-icon({ icon: 'github', className: 'custom-icon' })
+//- +runtime-svg-icon({ icon: 'github', title: 'GitHub Repository' })
+mixin runtime-svg-icon({ icon, size, className, title, ariaHidden = false })
+	+preload-svg-spritesheet-icon({ icon })
+	svg-icon(
+		icon=icon,
+		class=className,
+		size=size ? size : false,
+		title=title ? title : false,
+		aria-hidden=ariaHidden ? 'true' : false
+	)&attributes(attributes)
+
+//- Preload Icon in Spritesheet
+//-
+//- This mixin preloads an icon in the SVG spritesheet without displaying it.
+//- Use this for icons that will be dynamically added via JavaScript.
+//-
+//- Example:
+//- +preload-svg-spritesheet-icon({ icon: 'github' })
+mixin preload-svg-spritesheet-icon({ icon })
+	+preload-spritesheet-svg({ file: `icons/${ icon }` })

package/themes/umberto/layout/gloria/_components/icon-message/_style.scss

@@ -0,0 +1,13 @@
+.c-icon-message {
+	display: flex;
+	align-items: center;
+	gap: var(--spacing-2);
+
+	&__content {
+		flex: 1;
+	}
+
+	&__icon {
+		display: inline-flex;
+	}
+}

package/themes/umberto/layout/gloria/_components/icon-message/index.pug

@@ -0,0 +1,17 @@
+//- Icon Message component
+//-
+//- Examples:
+//- +icon-message({ icon: 'github', iconPosition: 'left' }) Icon message left
+//- +icon-message({ icon: 'github', iconPosition: 'right' }) Icon message right
+mixin icon-message({ icon, iconSize, iconPosition = 'left', className })
+	span.c-icon-message(class=className)&attributes(attributes)
+		if iconPosition === 'left'
+			span.c-icon-message__icon
+				+svg-icon({ icon, size: iconSize, ariaHidden: true })
+			span.c-icon-message__content
+				block
+		else
+			span.c-icon-message__content
+				block
+			span.c-icon-message__icon
+				+svg-icon({ icon, size: iconSize, ariaHidden: true })

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

@@ -0,0 +1,10 @@
+.c-iframe {
+	margin: var(--spacing-4) 0;
+	width: 100%;
+
+	&__frame {
+		margin: 0;
+		width: 100%;
+		min-height: 300px;
+	}
+}

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

@@ -0,0 +1,22 @@
+mixin iframe(options)
+	-
+		const {
+			id, content,
+			width, height, className, sandbox,
+			autoResize = true,
+			src = false,
+			srcdoc = false
+		} = options || {}
+
+	.c-iframe(
+		id=id,
+		class=className,
+		data-src=src,
+		data-content=content,
+		data-auto-resize=(autoResize && !width && !height ? 'true' : 'false'),
+		data-width=width,
+		data-height=height,
+		data-iframe-sandbox=sandbox,
+		data-iframe-src=src,
+		data-iframe-srcdoc=srcdoc,
+	)

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

@@ -0,0 +1,17 @@
+//- Image injection mixin
+//-
+//- This mixin injects an external image into HTML.
+//- It allows specifying the file name, class, width, and height.
+//-
+//- Example:
+//- +img({ file: 'logo.png', className: 'custom-logo', width: 100, height: 100 })
+mixin img({ file, className, width, height, alt })
+	- const path = `/assets/${ umbertoVersion }/gloria/img/${ file }`;
+
+	img(
+		class=[className],
+		alt=alt,
+		src=path,
+		width=width,
+		height=height
+	)

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

@@ -0,0 +1,31 @@
+include ./badge/index
+include ./button/index
+include ./callout/index
+include ./banner/index
+include ./divider/index
+include ./code-block/index
+include ./code-switcher/index
+include ./cke5-code-switcher/index
+include ./dropdown/index
+include ./icon/index
+include ./icon-message/index
+include ./img/index
+include ./input/index
+include ./json-ld/index
+include ./menu-dropdown/index
+include ./mobile-overlay/index
+include ./nav-tree/index
+include ./spacer/index
+include ./svg/index
+include ./tabs/index
+include ./keyboard-shortcut/index
+include ./heading-link/index
+include ./tooltip-popover/index
+include ./checkbox/index
+include ./card-learn-more-links/index
+include ./card/index
+include ./skeleton/index
+include ./fake-devtools/index
+include ./iframe/index
+include ./tag/index
+include ./columns/index

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

@@ -0,0 +1,82 @@
+@use "@gloria/a11y/_mixins.scss" as *;
+
+.c-input-wrapper {
+	position: relative;
+	display: inline-flex;
+	align-items: center;
+
+	&--expanded {
+		width: 100%;
+	}
+
+	.c-icon {
+		position: absolute;
+		color: var(--color-text-primary);
+
+		&:first-child {
+			left: var(--spacing-3);
+		}
+
+		&:last-child {
+			right: var(--spacing-3);
+		}
+	}
+}
+
+.c-input {
+	display: block;
+	width: 100%;
+	height: 40px;
+	margin: 0;
+	padding: var(--spacing-2) var(--spacing-4);
+	border: 1px solid var(--color-gray-400);
+	border-radius: var(--radius-1);
+	appearance: none;
+	outline: none;
+	font-family: inherit;
+	-webkit-appearance: none;
+	-moz-appearance: none;
+	background-clip: padding-box;
+	background-color: var(--color-common-white);
+	color: var(--color-text-primary);
+
+	@include a11y-keyboard-focus-ring;
+
+	&:focus {
+		@include a11y-focus-ring-outline;
+	}
+
+	&::-webkit-search-decoration,
+	&::-webkit-search-cancel-button,
+	&::-webkit-search-results-button,
+	&::-webkit-search-results-decoration {
+		display: none;
+	}
+
+	&::placeholder {
+		transition: color var(--duration-normal) var(--cbuc-sine-out);
+		font-size: var(--font-size-sm);
+		color: var(--color-text-primary);
+
+		@media (prefers-reduced-motion: reduce) {
+			transition: none;
+		}
+	}
+
+	&:disabled {
+		background-color: var(--color-secondary-100-disabled);
+		color: var(--color-text-disabled);
+		border-color: var(--color-secondary-light-disabled);
+		cursor: not-allowed;
+	}
+
+	&--with-icon {
+		&.c-input--icon-left {
+			padding-left: calc(var(--spacing-5) + var(--font-size-base));
+		}
+
+		&.c-input--icon-right {
+			padding-right: calc(var(--spacing-5) + var(--font-size-base));
+		}
+	}
+}

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

@@ -0,0 +1,34 @@
+//- Input component
+//-
+//- Examples:
+//- +input({ type: 'text', placeholder: 'Enter text...' })
+//- +input({ type: 'email', placeholder: 'Enter email...' })
+//- +input({ type: 'text', icon: 'search', placeholder: 'Search...' })
+//- +input({ type: 'text', icon: 'search', iconPosition: 'right', placeholder: 'Search...' })
+//- +input({ type: 'text', placeholder: 'Disabled input', disabled: true })
+//- +input({ type: 'password', placeholder: 'Enter password' })
+mixin input({ id, disabled, expanded, className, type = 'text', value = false, readonly = false, placeholder, icon, iconPosition = 'left' })
+	.c-input-wrapper(
+		id=id,
+		class={
+			[className]: !!className,
+			'c-input-wrapper--disabled': disabled,
+			'c-input-wrapper--expanded': expanded
+		}
+	)
+		if icon && iconPosition === 'left'
+			+svg-icon({ icon, ariaHidden: true })
+
+		input.c-input(
+			disabled=disabled,
+			type=type,
+			placeholder=placeholder,
+			value=value,
+			readonly=readonly,
+			class={
+				[`c-input--with-icon c-input--icon-${iconPosition}`]: icon,
+			}
+		)&attributes(attributes)
+
+		if icon && iconPosition === 'right'
+			+svg-icon({ icon, ariaHidden: true })

package/themes/umberto/layout/gloria/_components/json-ld/index.pug

@@ -0,0 +1,3 @@
+mixin json-ld({ json })
+  script(type="application/ld+json")
+    | !{JSON.stringify(json)}

package/themes/umberto/layout/gloria/_components/keyboard-shortcut/_style.scss

@@ -0,0 +1,49 @@
+.c-keyboard-shortcut {
+	display: inline-block;
+	color: var(--color-text-primary);
+	background: var(--color-gray-200);
+	border: solid 1px var(--color-gray-300);
+	font-family: var(--font-family-text);
+	font-size: var(--font-size-xs);
+	font-weight: var(--font-weight-medium);
+	padding: var(--spacing-1) var(--spacing-2);
+	line-height: var(--line-height-xs);
+	vertical-align: middle;
+	border-radius: var(--radius-2);
+
+	&-combo {
+		display: flex;
+		flex-direction: row;
+		flex-wrap: nowrap;
+		align-items: center;
+	}
+
+	&--flat {
+		color: var(--color-gray-800);
+    	font-weight: var(--font-weight-regular);
+		background: transparent;
+		border: solid 1px var(--color-gray-500);
+	}
+
+	&--raised {
+		position: relative;
+		background: var(--color-gray-200);
+		border: 1px solid var(--color-gray-400);
+		box-shadow: 0 1px var(--color-gray-600), 0 0 0 2px var(--color-gray-100) inset;
+		text-shadow: 0 1px 0 var(--color-gray-100);
+		border-radius: var(--radius-1);
+		min-width: 2ch;
+		min-height: 2ch;
+		text-align: center;
+		margin: 0 var(--spacing-1);
+		padding: var(--spacing-1) var(--spacing-2);
+	}
+
+	&__separator {
+		display: inline-flex;
+		align-items: center;
+		height: 100%;
+		margin: 0 .25em;
+		color: var(--color-gray-800);
+	}
+}

package/themes/umberto/layout/gloria/_components/keyboard-shortcut/index.pug

@@ -0,0 +1,23 @@
+mixin keyboard-shortcut({ keys, variant = 'raised', description = '' })
+	-
+		const keysString = keys.join(' + ');
+		const ariaLabel = (
+			description
+				? `${description} (keyboard shortcut: ${keysString})`
+				: `Keyboard shortcut: ${keysString}`
+		);
+
+	span.c-keyboard-shortcut-combo(
+		aria-label=ariaLabel
+		role="text"
+	)
+		each key, index in keys
+			kbd.c-keyboard-shortcut(
+				class={
+					[`c-keyboard-shortcut--${ variant }`]: true
+				}
+			)
+				= key
+
+			if index < keys.length - 1
+				span.c-keyboard-shortcut__separator(aria-hidden="true") +

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

@@ -0,0 +1,27 @@
+.c-menu-dropdown {
+	&__button {
+		color: var(--color-text-primary);
+
+		& > .c-icon {
+			color: var(--color-primary-500);
+		}
+
+		&:hover {
+			background-color: var(--color-primary-100);
+		}
+
+		&.is-active,
+		&:active {
+			background-color: var(--color-primary-100);
+			color: var(--color-primary);
+		}
+	}
+
+	&[data-preferred-direction='up'] .c-menu-dropdown__button  > .c-icon {
+		transform: rotate(-90deg);
+	}
+
+	&[data-preferred-direction='down'] .c-menu-dropdown__button > .c-icon {
+		transform: rotate(90deg);
+	}
+}

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

@@ -0,0 +1,40 @@
+//- Menu dropdown component
+//-
+//- Examples:
+//- +menu-dropdown({ label: 'Menu' })
+//-   +dropdown-item({ text: 'Item 1' })
+//-   +dropdown-item({ text: 'Item 2', active: true })
+//-   +dropdown-item({ text: 'Item 3' })
+//-
+//- +menu-dropdown({ preferredDirection: 'up', label: 'Menu (up)' })
+//-   +dropdown-item({ text: 'Item 1' })
+//-   +dropdown-item({ text: 'Item 2' })
+//-
+//- +menu-dropdown({ className: 'custom-menu', label: 'Custom menu' })
+//-   +dropdown-item({ text: 'Item 1', icon: 'github' })
+//-   +dropdown-item({ text: 'Item 2' })
+mixin menu-dropdown({ id, className, updateValueOnSelect, preferredDirection = 'down', label } = {})
+	- const contentId = uRandomId('menu');
+
+	+dropdown({
+		id,
+		className: 'c-menu-dropdown',
+		preferredDirection,
+		contentId,
+		updateValueOnSelect
+	})
+		+trigger
+			+button({
+				label,
+				className: 'c-menu-dropdown__button',
+				variant: false,
+				icon: 'chevron-right',
+				iconPosition: 'right'
+			})(
+				aria-haspopup='true',
+				aria-expanded='false',
+				aria-controls=contentId
+			)
+
+		+content
+			block

package/themes/umberto/layout/gloria/_components/mobile-overlay/_style.scss

@@ -0,0 +1,70 @@
+@use "@gloria/layout/_mixins.scss" as *;
+
+.c-mobile-overlay {
+	display: none;
+	flex-direction: column;
+	z-index: var(--z-index-overlay);
+	position: fixed;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	background-color: var(--color-common-white);
+	overflow-y: auto;
+	opacity: 0;
+	transform: translateY(-100%);
+	transition: transform var(--duration-fast) var(--cbuc-cubic-out),
+	            opacity var(--duration-fast) var(--cbuc-cubic-out);
+
+	&[data-headless='true'] {
+		// This is a workaround for the overlay placed on-top of the overlay with the head.
+		// If the header is fixed, it is slightly above the overlay and it'll overlap to headless one.
+		z-index: calc(var(--z-index-overlay) + 2);
+	}
+
+	&.is-anim {
+		&-entering {
+			transform: translateY(0);
+			opacity: 1;
+		}
+
+		&-entered {
+			transform: translateY(0);
+			opacity: 1;
+		}
+
+		&-exiting {
+			transform: translateY(-100%);
+			opacity: 0;
+		}
+
+		&-exited {
+			transform: translateY(-100%);
+			opacity: 0;
+		}
+	}
+
+	&__header {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		padding-bottom: var(--spacing-4);
+		border-bottom: 1px solid var(--color-gray-400);
+	}
+
+	&__title {
+		font-family: var(--font-family-heading);
+		font-size: var(--font-size-lg);
+		font-weight: var(--font-weight-bold);
+	}
+
+	&__content {
+		position: relative;
+		flex: 1;
+
+		&.is-spaced {
+			padding: var(--spacing-4);
+		}
+	}
+}
+

package/themes/umberto/layout/gloria/_components/mobile-overlay/index.pug

@@ -0,0 +1,37 @@
+//- Mobile Overlay component
+//-
+//- Example:
+//- - const mobileMenuId = 'mobile-menu';
+//- +button({
+//-   id: 'mobile-menu-button',
+//-   className: 'js-toggle-mobile-overlay',
+//-   icon: 'menu',
+//-   variant: 'toolbar',
+//-   square: true,
+//-   ariaLabel: 'Toggle mobile menu'
+//- })(
+//-   aria-expanded='false',
+//-   aria-controls=mobileMenuId,
+//-   aria-haspopup='true'
+//- )
+//-
+//- +mobile-overlay({
+//-   id: mobileMenuId,
+//-   ariaLabeledBy: 'mobile-menu-button',
+//-   spaced: false
+//- })
+//-   h2 Mobile Menu Content
+//-   p This is the content of the mobile menu overlay.
+mixin mobile-overlay({ id, ariaLabeledBy, headless = false, spaced = true })
+	div.c-mobile-overlay.l-hide-desktop.js-mobile-overlay(
+		id=id,
+		role='dialog',
+		aria-labelledby=ariaLabeledBy,
+		aria-hidden='true',
+		aria-modal='true',
+		tabindex='-1',
+		data-headless=(headless.toString()),
+	)
+		div.c-mobile-overlay__content(class=spaced && 'is-spaced')
+			if block
+				block