umberto 7.0.2 → 8.0.0

package/themes/umberto/src/gloria/css/base/_tables.scss

@@ -0,0 +1,68 @@
+@layer base {
+	.b-table {
+		--table-border-color: var(--color-gray-400);
+
+		width: 100%;
+		margin: var(--spacing-6) 0;
+		border-collapse: collapse;
+		border: 1px solid var(--table-border-color);
+		border-radius: var(--radius-2);
+
+		&--striped &__row {
+			&:nth-child(even) {
+				background-color: var(--color-gray-200);
+			}
+		}
+
+		&__cell {
+			padding: var(--spacing-3) var(--spacing-4);
+			border-bottom: 1px solid var(--table-border-color);
+			border-right: 1px solid var(--table-border-color);
+			vertical-align: top;
+			font-size: var(--font-size-sm);
+			line-height: var(--line-height-base);
+
+			&:last-child {
+				border-right: none;
+			}
+
+			.b-inline-code {
+				white-space: nowrap;
+			}
+		}
+
+		&__header {
+			vertical-align: bottom;
+			text-align: left;
+			font-weight: var(--font-weight-bold);
+			font-family: var(--font-family-heading);
+			background-color: var(--color-gray-200);
+		}
+
+		&-wrapper {
+			margin: 0;
+			overflow-x: auto;
+			overflow-y: hidden;
+		}
+	}
+
+	.b-prose table {
+		@extend .b-table;
+
+		&--striped tr {
+			@extend .b-table--striped;
+		}
+
+		tr {
+			@extend .b-table__row;
+		}
+
+		td, th {
+			@extend .b-table__cell;
+		}
+
+		thead {
+			@extend .b-table__header;
+		}
+	}
+}

package/themes/umberto/src/gloria/css/base/_typography.scss

@@ -0,0 +1,62 @@
+@layer base {
+	:root {
+		/* Font Families */
+		--font-family-heading: 'Mulish', sans-serif;
+		--font-family-text: 'Public Sans', sans-serif;
+		--font-family-monospace: 'Menlo', monospace;
+
+		/* Font Weights */
+		--font-weight-thin: 300;
+		--font-weight-regular: 400;
+		--font-weight-semibold: 500;
+		--font-weight-bold: 600;
+		--font-weight-bolder: 700;
+
+		/* Font Sizes */
+		--font-size-4xl: 2.25rem;  /* 36px */
+		--font-size-3xl: 2rem;     /* 32px */
+		--font-size-2xl: 1.75rem;  /* 28px */
+		--font-size-xl: 1.5rem;    /* 24px */
+		--font-size-lg: 1.25rem;   /* 20px */
+		--font-size-base: 1rem;    /* 16px */
+		--font-size-sm: 0.875rem;  /* 14px */
+		--font-size-xs: 0.75rem;   /* 12px */
+
+		/* Line Heights */
+		--line-height-xs: 100%;
+		--line-height-sm: 120%;
+		--line-height-md: 145%;
+		--line-height-base: 160%;
+
+		/* Letter Spacing */
+		--letter-spacing-base: 0%;
+
+		/* Paragraph Spacing */
+		--paragraph-spacing-base: 0px;
+
+		/* Text Decoration */
+		--text-decoration-underline: underline;
+		--text-decoration-none: none;
+	}
+
+	.b-font-heading {
+		font-family: var(--font-family-heading);
+		line-height: var(--line-height-sm);
+		letter-spacing: var(--letter-spacing-base);
+		color: var(--color-text-primary);
+	}
+
+	.b-font-text {
+		font-family: var(--font-family-text);
+		font-weight: var(--font-weight-thin);
+		line-height: var(--line-height-base);
+		letter-spacing: var(--letter-spacing-base);
+		color: var(--color-text-primary);
+	}
+
+	.b-font-monospace {
+		font-family: var(--font-family-monospace);
+		line-height: var(--line-height-base);
+		letter-spacing: var(--letter-spacing-base);
+	}
+}

package/themes/umberto/src/gloria/css/components/_api-collapsing-list.scss

@@ -0,0 +1,148 @@
+@use '../base/paragraphs' as *;
+@use '../base/links' as *;
+@use '../base/lists' as *;
+@use '../base/inline-code' as *;
+@use '../base/descriptions-list' as *;
+
+.collapsing-list {
+	margin: 0;
+	padding: 0;
+	list-style: none;
+
+	&__item {
+		position: relative;
+		padding: var(--spacing-6) var(--spacing-6) var(--spacing-6) 0;
+		border-top: 1px solid var(--color-gray-400);
+
+		&:has(.collapsing-list__item-chevron) {
+			padding-left: var(--spacing-6);
+		}
+
+		&-chevron {
+			position: absolute;
+			top: var(--spacing-7);
+			left: var(--spacing-1);
+			transform: translateY(1px);
+			transition: transform var(--duration-normal) ease;
+		}
+
+		&--open {
+			.collapsing-list__item-chevron {
+				transform: rotate(90deg);
+			}
+		}
+	}
+
+	&__intro {
+		&:has(.collapsing-list__item-chevron) {
+			cursor: pointer;
+		}
+
+		h3 {
+			margin: 0;
+		}
+	}
+
+	&__description {
+		overflow: hidden;
+		transition: height var(--duration-normal) var(--smootherstep);
+
+		> * {
+			&:first-child {
+				margin-top: var(--spacing-4);
+			}
+		}
+
+		&--open {
+			height: auto;
+		}
+	}
+
+	&__content {
+		h4 {
+			font-size: 1.125rem;
+
+			&:has(+ dl, + ul) {
+				margin-bottom: var(--spacing-2);
+			}
+		}
+	}
+
+	&-wrapper {
+		&.is-empty {
+			&:before {
+				content: "No items to display for the current filtering criteria.";
+				display: block;
+				margin: var(--spacing-4) 0;
+
+				font-family: var(--font-family-text);
+				font-weight: var(--font-weight-thin);
+				line-height: var(--line-height-base);
+				letter-spacing: var(--letter-spacing-base);
+				color: var(--color-text-primary);
+				font-style: italic;
+			}
+
+			> * {
+				display: none;
+			}
+		}
+	}
+}
+
+.collapsing-list__content,
+.main-description {
+	p {
+		@extend .b-paragraph;
+	}
+
+	a {
+		@extend .b-link;
+	}
+
+	ul,
+	ol {
+		@extend .b-list;
+		@extend .b-list--unordered;
+
+		li {
+			@extend .b-list__item;
+		}
+	}
+
+	ul {
+		@extend .b-list--unordered;
+	}
+
+	ol {
+		@extend .b-list--ordered;
+	}
+
+	p > code,
+	dt > code {
+		@extend .b-inline-code;
+	}
+
+	dl {
+		@extend .b-description;
+		margin-left: var(--spacing-4);
+	}
+
+	dt {
+		@extend .b-description__term;
+	}
+
+	dd {
+		@extend .b-description__details;
+	}
+}
+
+.collapsing-list__content {
+	dd {
+		margin-left: var(--spacing-8);
+	}
+}
+
+.main-description + .see-source {
+	margin-top: var(--spacing-3);
+}

package/themes/umberto/src/gloria/css/components/_api-filter-dropdown.scss

@@ -0,0 +1,17 @@
+@use "@gloria/layout/_mixins.scss" as *;
+@use "@gloria/base/_mixins.scss" as *;
+
+.api-filter-dropdown {
+	position: fixed;
+	z-index: 1;
+	margin-right: 3rem;
+	background-color: var(--color-common-white);
+
+	&:has( + .is-hidden ) {
+		margin-right: 0;
+	}
+
+	@include min-width($breakpoint-lg) {
+		margin-right: 0;
+	}
+}

package/themes/umberto/src/gloria/css/components/_api-item-heading.scss

@@ -0,0 +1,58 @@
+@use "@gloria/layout/_mixins.scss" as *;
+
+.api-item-heading {
+	display: flex;
+	justify-content: space-between;
+	align-items: baseline;
+
+	@include mobile {
+		display: block;
+	}
+
+	> * {
+		@include mobile {
+			margin-bottom: var(--spacing-3);
+		}
+	}
+
+	&__code {
+		font-family: var(--font-family-monospace);
+		font-weight: var(--font-weight-regular);
+		font-size: var(--font-size-sm);
+		line-height: var(--line-height-md);
+		color: var(--color-text-primary);
+		min-height: 26px; // tag height.
+		align-content: center;
+
+		@include mobile {
+			display: block;
+			width: 100%;
+			margin-bottom: var(--spacing-3);
+		}
+
+		a.doc.b-link {
+			text-decoration: none;
+		}
+	}
+
+	&__dev-names {
+		display: block;
+		margin-top: var(--spacing-1);
+		font-family: var(--font-family-monospace);
+		font-weight: var(--font-weight-regular);
+		font-size: var(--font-size-xs);
+		line-height: var(--line-height-md);
+		color: var(--color-text-secondary);
+
+		code {
+			display: block;
+			cursor: default;
+			white-space: nowrap;
+			overflow: hidden;
+			text-overflow: ellipsis;
+			direction: rtl;
+			text-align: left;
+			width: 100%;
+		}
+	}
+}

package/themes/umberto/src/gloria/css/components/_api-tree.scss

@@ -0,0 +1,202 @@
+@layer components {
+	.api-tree {
+		margin: 0;
+		padding: 0;
+		font-size: var(--font-size-xs);
+		line-height: var(--line-height-md);
+		color: var(--color-secondary-700);
+		font-family: var(--font-family-monospace);
+		font-weight: var(--font-weight-regular);
+		list-style: none;
+		content-visibility: auto;
+
+		>.api-tree__item {
+			>.api-tree__item-wrapper {
+				padding-left: var(--spacing-6);
+			}
+		}
+
+		&__list {
+			padding: 0;
+			margin: 0;
+			list-style: none;
+			overflow: hidden;
+			transition: height var(--duration-normal) var(--smootherstep);
+
+			&--hidden {
+				height: 0;
+				display: none;
+			}
+		}
+
+		&__item-wrapper {
+			position: relative;
+			padding-left: calc(var(--spacing-5) * var(--level, 0));
+			padding-top: var(--spacing-1);
+			padding-bottom: var(--spacing-1);
+
+			&.active,
+			&:hover {
+				background-color: var(--color-primary-100);
+			}
+
+			&.active {
+				box-shadow: -2px 0px 0px 0px var(--color-primary-300) inset;
+			}
+
+			.c-mobile-nav__slide & {
+				padding-top: var(--spacing-3);
+				padding-bottom: var(--spacing-3);
+			}
+		}
+
+		&__item {
+			// TODO: or not.
+		}
+
+		&__link {
+			color: var(--color-secondary-700);
+			text-decoration: none;
+
+			&--with-icon {
+				position: relative;
+
+				&:before {
+					position: absolute;
+					left: 0;
+					width: 1rem;
+					height: 1rem;
+					background-color: transparent;
+					transform: translateY(1px);
+				}
+
+				.api-tree__text {
+					margin-inline-start: calc( 1rem + var(--spacing-1-5));
+				}
+
+				&.api-tree__text {
+					padding-left: calc( 1rem + var(--spacing-1-5));
+				}
+			}
+
+			&--icon {
+				&-class {
+					&:before {
+						content: url('data:image/svg+xml,<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(%23clip0_3447_10487)"><path d="M13.45 8.77884L12.4265 7.90384C12.475 7.60697 12.5 7.30384 12.5 7.00072C12.5 6.69759 12.475 6.39447 12.4265 6.09759L13.45 5.22259C13.5271 5.15651 13.5824 5.06849 13.6084 4.97025C13.6343 4.872 13.6297 4.76818 13.5953 4.67259L13.5812 4.63197C13.2995 3.84451 12.8776 3.11452 12.3359 2.47728L12.3078 2.44447C12.2421 2.3672 12.1545 2.31166 12.0566 2.28517C11.9587 2.25867 11.855 2.26246 11.7593 2.29603L10.489 2.74759C10.0203 2.36322 9.49683 2.06009 8.9312 1.84759L8.68589 0.519466C8.66738 0.419532 8.61891 0.327595 8.5469 0.255869C8.4749 0.184143 8.38277 0.136024 8.28277 0.117904L8.24058 0.110091C7.42652 -0.0367836 6.57027 -0.0367836 5.7562 0.110091L5.71402 0.117904C5.61401 0.136024 5.52189 0.184143 5.44988 0.255869C5.37788 0.327595 5.3294 0.419532 5.31089 0.519466L5.06402 1.85384C4.5029 2.06639 3.98037 2.36935 3.51714 2.75072L2.23745 2.29603C2.14178 2.26219 2.03806 2.25826 1.9401 2.28478C1.84214 2.31129 1.75457 2.36699 1.68902 2.44447L1.66089 2.47728C1.11987 3.11497 0.698042 3.84484 0.415579 4.63197L0.401517 4.67259C0.331204 4.8679 0.389017 5.08665 0.546829 5.22259L1.58277 6.10697C1.53433 6.40072 1.51089 6.70072 1.51089 6.99915C1.51089 7.29915 1.53433 7.59915 1.58277 7.89134L0.546829 8.77572C0.469635 8.8418 0.414386 8.92982 0.388429 9.02806C0.362472 9.12631 0.367037 9.23013 0.401517 9.32572L0.415579 9.36634C0.698392 10.1538 1.11714 10.8804 1.66089 11.521L1.68902 11.5538C1.75473 11.6311 1.8423 11.6866 1.94021 11.7131C2.03811 11.7396 2.14175 11.7359 2.23745 11.7023L3.51714 11.2476C3.98277 11.6304 4.50308 11.9335 5.06402 12.1445L5.31089 13.4788C5.3294 13.5788 5.37788 13.6707 5.44988 13.7424C5.52189 13.8142 5.61401 13.8623 5.71402 13.8804L5.7562 13.8882C6.57775 14.0359 7.41904 14.0359 8.24058 13.8882L8.28277 13.8804C8.38277 13.8623 8.4749 13.8142 8.5469 13.7424C8.61891 13.6707 8.66738 13.5788 8.68589 13.4788L8.9312 12.1507C9.4966 11.9388 10.023 11.6347 10.489 11.2507L11.7593 11.7023C11.855 11.7361 11.9587 11.74 12.0567 11.7135C12.1546 11.687 12.2422 11.6313 12.3078 11.5538L12.3359 11.521C12.8796 10.8788 13.2984 10.1538 13.5812 9.36634L13.5953 9.32572C13.6656 9.13353 13.6078 8.91478 13.45 8.77884ZM11.3171 6.28197C11.3562 6.5179 11.3765 6.76009 11.3765 7.00228C11.3765 7.24447 11.3562 7.48665 11.3171 7.72259L11.214 8.34916L12.3812 9.34759C12.2043 9.75523 11.9809 10.1411 11.7156 10.4976L10.2656 9.98353L9.77495 10.3867C9.40152 10.6929 8.98589 10.9335 8.53589 11.1023L7.94058 11.3257L7.66089 12.8413C7.21959 12.8913 6.77406 12.8913 6.33277 12.8413L6.05308 11.3226L5.46245 11.096C5.01714 10.9273 4.60308 10.6867 4.23277 10.382L3.74214 9.97728L2.28277 10.496C2.01714 10.1382 1.79527 9.75228 1.61714 9.34603L2.79683 8.33822L2.69527 7.71322C2.65777 7.4804 2.63745 7.23978 2.63745 7.00228C2.63745 6.76322 2.6562 6.52415 2.69527 6.29134L2.79683 5.66634L1.61714 4.65853C1.7937 4.25072 2.01714 3.86634 2.28277 3.50853L3.74214 4.02728L4.23277 3.62259C4.60308 3.3179 5.01714 3.07728 5.46245 2.90853L6.05464 2.68509L6.33433 1.16634C6.77339 1.11634 7.22183 1.11634 7.66245 1.16634L7.94214 2.68197L8.53745 2.9054C8.98589 3.07415 9.40308 3.31478 9.77652 3.62103L10.2671 4.02415L11.7171 3.51009C11.9828 3.8679 12.2046 4.25384 12.3828 4.66009L11.2156 5.65853L11.3171 6.28197ZM6.99995 4.09603C5.4812 4.09603 4.24995 5.32728 4.24995 6.84603C4.24995 8.36478 5.4812 9.59603 6.99995 9.59603C8.5187 9.59603 9.74995 8.36478 9.74995 6.84603C9.74995 5.32728 8.5187 4.09603 6.99995 4.09603ZM8.23745 8.08353C8.07514 8.24631 7.88225 8.37538 7.66987 8.46334C7.4575 8.55129 7.22982 8.59639 6.99995 8.59603C6.53277 8.59603 6.0937 8.41322 5.76245 8.08353C5.59968 7.92122 5.4706 7.72833 5.38265 7.51595C5.29469 7.30357 5.2496 7.0759 5.24995 6.84603C5.24995 6.37884 5.43277 5.93978 5.76245 5.60853C6.0937 5.27728 6.53277 5.09603 6.99995 5.09603C7.46714 5.09603 7.9062 5.27728 8.23745 5.60853C8.40023 5.77084 8.52931 5.96373 8.61726 6.17611C8.70522 6.38849 8.75031 6.61616 8.74995 6.84603C8.74995 7.31322 8.56714 7.75228 8.23745 8.08353Z" fill="%235B45AD"/></g><defs><clipPath id="clip0_3447_10487"><rect width="14" height="14" fill="white"/></clipPath></defs></svg>') / 'Api-class icon';
+					}
+				}
+
+				&-folder {
+					&:before {
+						content: url('data:image/svg+xml,<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M14.3781 4.41829H8.35823L6.39131 2.53689C6.36629 2.51346 6.33337 2.50029 6.29909 2.5H2.03659C1.73979 2.5 1.5 2.73979 1.5 3.03659V12.9634C1.5 13.2602 1.73979 13.5 2.03659 13.5H14.3781C14.6748 13.5 14.9146 13.2602 14.9146 12.9634V4.95488C14.9146 4.65808 14.6748 4.41829 14.3781 4.41829ZM13.7073 12.2927H2.70732V3.70732H5.86814L7.87363 5.62561H13.7073V12.2927Z" fill="%231495ED"/></svg>') / 'Api-folder icon';
+					}
+				}
+
+				&-interface {
+					&:before {
+						content: url('data:image/svg+xml,<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13.9981 9.42911H1.57127C1.4927 9.42911 1.42842 9.4934 1.42842 9.57197V10.6434C1.42842 10.722 1.4927 10.7863 1.57127 10.7863H12.3784L9.80163 14.0541C9.72842 14.147 9.79449 14.2863 9.91413 14.2863H11.2088C11.2963 14.2863 11.3784 14.247 11.4338 14.1773L14.4481 10.3541C14.7427 9.97911 14.4766 9.42911 13.9981 9.42911ZM14.4284 5.21483H3.62127L6.19806 1.94697C6.27128 1.85411 6.2052 1.71483 6.08556 1.71483H4.79092C4.70342 1.71483 4.62128 1.75411 4.56592 1.82376L1.55163 5.64697C1.25699 6.02197 1.52306 6.57197 1.99985 6.57197H14.4284C14.507 6.57197 14.5713 6.50769 14.5713 6.42911V5.35769C14.5713 5.27911 14.507 5.21483 14.4284 5.21483Z" fill="%2384AB32"/></svg>') / 'Api-interface icon';
+					}
+				}
+
+				&-module {
+					&:before {
+						content: url('data:image/svg+xml,<svg width="14" height="12" viewBox="0 0 14 12" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M8.72308 0C9.25837 5.24144e-08 9.69231 0.409773 9.69231 0.915254V2.80535C10.9908 3.62633 11.8462 5.02368 11.8462 6.61017C11.8462 6.71271 11.8414 6.81439 11.8344 6.91525H13.0308C13.5661 6.91525 14 7.32503 14 7.83051V11.0847C14 11.5902 13.5661 12 13.0308 12H9.58462C9.04932 12 8.61539 11.5902 8.61539 11.0847V10.9243C8.10996 11.093 7.56663 11.1864 7 11.1864C6.43337 11.1864 5.89004 11.093 5.38462 10.9243V11.0847C5.38462 11.5902 4.95068 12 4.41538 12H0.969231C0.43394 12 3.46907e-09 11.5902 0 11.0847V7.83051C5.55055e-08 7.32503 0.433939 6.91525 0.969231 6.91525H2.16563C2.15859 6.81439 2.15385 6.71271 2.15385 6.61017C2.15385 5.02368 3.00917 3.62633 4.30769 2.80535V0.915254C4.30769 0.409773 4.74163 3.27588e-09 5.27692 0H8.72308ZM1.07692 10.9831H4.30769V7.9322H2.35998H1.07692V10.9831ZM11.64 7.9322H9.69231V10.9831H12.9231V7.9322H11.64ZM9.69231 4.16949C9.69231 4.67497 9.25837 5.08475 8.72308 5.08475H5.27692C4.74163 5.08475 4.30769 4.67497 4.30769 4.16949V4.11944C3.6416 4.76139 3.23077 5.64042 3.23077 6.61017C3.23077 6.71296 3.23603 6.81468 3.24507 6.91525H4.41538C4.95068 6.91525 5.38462 7.32503 5.38462 7.83051V9.82627C5.87429 10.046 6.4218 10.1695 7 10.1695C7.5782 10.1695 8.12571 10.046 8.61539 9.82627V7.83051C8.61539 7.32503 9.04932 6.91525 9.58462 6.91525H10.7549C10.764 6.81468 10.7692 6.71296 10.7692 6.61017C10.7692 5.64042 10.3584 4.76139 9.69231 4.11944V4.16949ZM6.95778 1.01695H5.38462V4.0678H8.61539V1.01695H6.95778Z" fill="%23D83846"/></svg>') / 'Api-module icon';
+					}
+				}
+
+				&-package {
+					&:before {
+						content: url('data:image/svg+xml,<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M14.3291 6.87262L14.3257 6.8589L12.4004 1.96674C12.3146 1.69047 12.0589 1.5 11.7689 1.5H3.9648C3.67309 1.5 3.41398 1.6939 3.33161 1.9736L1.53159 6.816L1.52644 6.82801L1.52301 6.84174C1.5007 6.92582 1.49384 7.01162 1.50585 7.0957C1.50413 7.12315 1.50242 7.15061 1.50242 7.17806V13.4567C1.50287 13.7333 1.61293 13.9984 1.80849 14.1939C2.00405 14.3895 2.26915 14.4995 2.54571 14.5H13.3081C13.883 14.5 14.3514 14.0315 14.3531 13.4567V7.17806C14.3531 7.15576 14.3531 7.13345 14.3514 7.11457C14.3583 7.03049 14.3514 6.94984 14.3291 6.87262ZM9.25334 6.13477L9.24819 6.40417C9.23447 7.17463 8.70252 7.69285 7.9252 7.69285C7.54598 7.69285 7.21995 7.57101 6.98486 7.33936C6.74978 7.10771 6.62108 6.78511 6.61422 6.40417L6.60907 6.13477H3.07765L4.44183 2.81785H11.2919L12.6938 6.13477H9.25334ZM2.81855 7.45261H5.51773C5.9347 8.43242 6.82185 9.01069 7.92692 9.01069C8.50519 9.01069 9.04228 8.84939 9.47641 8.54395C9.85735 8.27627 10.1542 7.90219 10.3464 7.45261H13.0319V13.1822H2.81855V7.45261Z" fill="%23E7A138"/></svg>') / 'Api-package icon';
+					}
+				}
+
+				&-typedef {
+					&:before {
+						content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M12.98 0.5H1.02C0.732375 0.5 0.5 0.732375 0.5 1.02V12.98C0.5 13.2676 0.732375 13.5 1.02 13.5H12.98C13.2676 13.5 13.5 13.2676 13.5 12.98V1.02C13.5 0.732375 13.2676 0.5 12.98 0.5ZM12.33 12.33H1.67V1.67H12.33V12.33ZM6.675 5.18H9.665C9.7365 5.18 9.795 5.1215 9.795 5.05V4.27C9.795 4.1985 9.7365 4.14 9.665 4.14H6.675C6.6035 4.14 6.545 4.1985 6.545 4.27V5.05C6.545 5.1215 6.6035 5.18 6.675 5.18ZM6.675 7.52H9.665C9.7365 7.52 9.795 7.4615 9.795 7.39V6.61C9.795 6.5385 9.7365 6.48 9.665 6.48H6.675C6.6035 6.48 6.545 6.5385 6.545 6.61V7.39C6.545 7.4615 6.6035 7.52 6.675 7.52ZM6.675 9.86H9.665C9.7365 9.86 9.795 9.8015 9.795 9.73V8.95C9.795 8.8785 9.7365 8.82 9.665 8.82H6.675C6.6035 8.82 6.545 8.8785 6.545 8.95V9.73C6.545 9.8015 6.6035 9.86 6.675 9.86ZM4.205 4.66C4.205 4.83239 4.27348 4.99772 4.39538 5.11962C4.51728 5.24152 4.68261 5.31 4.855 5.31C5.02739 5.31 5.19272 5.24152 5.31462 5.11962C5.43652 4.99772 5.505 4.83239 5.505 4.66C5.505 4.48761 5.43652 4.32228 5.31462 4.20038C5.19272 4.07848 5.02739 4.01 4.855 4.01C4.68261 4.01 4.51728 4.07848 4.39538 4.20038C4.27348 4.32228 4.205 4.48761 4.205 4.66ZM4.205 7C4.205 7.17239 4.27348 7.33772 4.39538 7.45962C4.51728 7.58152 4.68261 7.65 4.855 7.65C5.02739 7.65 5.19272 7.58152 5.31462 7.45962C5.43652 7.33772 5.505 7.17239 5.505 7C5.505 6.82761 5.43652 6.66228 5.31462 6.54038C5.19272 6.41848 5.02739 6.35 4.855 6.35C4.68261 6.35 4.51728 6.41848 4.39538 6.54038C4.27348 6.66228 4.205 6.82761 4.205 7ZM4.205 9.34C4.205 9.51239 4.27348 9.67772 4.39538 9.79962C4.51728 9.92152 4.68261 9.99 4.855 9.99C5.02739 9.99 5.19272 9.92152 5.31462 9.79962C5.43652 9.67772 5.505 9.51239 5.505 9.34C5.505 9.16761 5.43652 9.00228 5.31462 8.88038C5.19272 8.75848 5.02739 8.69 4.855 8.69C4.68261 8.69 4.51728 8.75848 4.39538 8.88038C4.27348 9.00228 4.205 9.16761 4.205 9.34Z" fill="%23007184"/></svg>') / 'Api-typedef icon';
+					}
+				}
+			}
+		}
+
+		&__text {
+			font-size: var(--font-size-xs);
+			line-height: var(--line-height-md);
+			color: var(--color-secondary-700);
+			font-family: var(--font-family-monospace);
+			font-weight: var(--font-weight-regular);
+			text-decoration: none;
+			white-space: nowrap;
+			cursor: pointer;
+		}
+
+		&__icon {
+
+			&--mr {
+				margin-right: var(--spacing-1-5);
+			}
+
+			&--class {
+				color: var(--api-class);
+			}
+
+			&--folder {
+				color: var(--api-folder);
+			}
+
+			&--interface {
+				color: var(--api-interface);
+			}
+
+			&--module {
+				color: var(--api-module);
+			}
+
+			&--package {
+				color: var(--api-package);
+			}
+
+			&--typedef {
+				color: var(--api-typedef);
+			}
+
+			&--chevron {
+				color: var(--color-secondary-700);
+
+				.c-mobile-nav__slide & {
+					width: 1.25rem;
+					height: 1.25rem;
+				}
+
+			}
+		}
+
+		&__button {
+			position: absolute;
+			top: 50%;
+			transform: translate(-125%, -50%) rotate(0deg);
+			padding: 0;
+			background: transparent;
+			border: none;
+			cursor: pointer;
+			transition: transform var(--duration-normal) var(--cbuc-cubic-out);
+
+			&--open {
+				transform: translate(-125%, -50%) rotate(90deg);
+			}
+
+			&--chevron {
+				&:before {
+					content: url('data:image/svg+xml,<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M7.29274 3.96428C6.90222 3.57376 6.26905 3.57376 5.87853 3.96428C5.488 4.3548 5.488 4.98797 5.87853 5.37849L7.99982 7.49979L5.8785 9.62111C5.48798 10.0116 5.48798 10.6448 5.8785 11.0353C6.26903 11.4258 6.90219 11.4258 7.29272 11.0353L10.115 8.21301C10.1171 8.21099 10.1191 8.20896 10.1212 8.20692C10.5117 7.8164 10.5117 7.18323 10.1212 6.79271L10.1211 6.79268L7.29274 3.96428Z" fill="%233B4958"/></svg>') / 'Api-chevron icon';
+					width: 1rem;
+					height: 1rem;
+					display: inline-block;
+					vertical-align: middle;
+				}
+			}
+
+			.c-mobile-nav__slide & {
+				padding: 0.25rem;
+			}
+		}
+	}
+}

package/themes/umberto/src/gloria/css/components/_hierarchy-list.scss

@@ -0,0 +1,35 @@
+
+.hierarchy-list {
+	list-style: none;
+	margin: 0 0 var(--spacing-3) var(--spacing-1);
+	padding: 0;
+
+	ul {
+		list-style: none;
+
+		li {
+			&::before {
+				content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M11.5712 13.5712H10.5712C10.4926 13.5712 10.4283 13.6354 10.4283 13.714V14.714C10.4283 14.7926 10.4926 14.8569 10.5712 14.8569H11.5712C11.6497 14.8569 11.714 14.7926 11.714 14.714V13.714C11.714 13.6354 11.6497 13.5712 11.5712 13.5712ZM1.28544 5.53544H2.28544C2.36401 5.53544 2.42829 5.47115 2.42829 5.39258V4.39258C2.42829 4.31401 2.36401 4.24972 2.28544 4.24972H1.28544C1.20686 4.24972 1.14258 4.31401 1.14258 4.39258V5.39258C1.14258 5.47115 1.20686 5.53544 1.28544 5.53544ZM1.28544 2.42829H2.28544C2.36401 2.42829 2.42829 2.36401 2.42829 2.28544V1.28544C2.42829 1.20686 2.36401 1.14258 2.28544 1.14258H1.28544C1.20686 1.14258 1.14258 1.20686 1.14258 1.28544V2.28544C1.14258 2.36401 1.20686 2.42829 1.28544 2.42829ZM14.714 13.5712H13.714C13.6354 13.5712 13.5712 13.6354 13.5712 13.714V14.714C13.5712 14.7926 13.6354 14.8569 13.714 14.8569H14.714C14.7926 14.8569 14.8569 14.7926 14.8569 14.714V13.714C14.8569 13.6354 14.7926 13.5712 14.714 13.5712ZM8.49972 13.5712H5.24972C3.69079 13.5712 2.42829 12.3087 2.42829 10.7497V7.49972C2.42829 7.42115 2.36401 7.35687 2.28544 7.35687H1.28544C1.20686 7.35687 1.14258 7.42115 1.14258 7.49972V10.7497C1.14258 13.0176 2.98186 14.8569 5.24972 14.8569H8.49972C8.57829 14.8569 8.64258 14.7926 8.64258 14.714V13.714C8.64258 13.6354 8.57829 13.5712 8.49972 13.5712Z" fill="%233B4958"/></svg>');
+				height: 1em;
+				width: 1em;
+				display: inline-block;
+				position: relative;
+				top: -.3em;
+			}
+
+			code,
+			.b-link {
+				font-family: var(--font-family-monospace);
+				font-weight: var(--font-weight-regular);
+				font-size: var(--font-size-sm);
+				line-height: var(--line-height-md);
+			}
+		}
+	}
+
+	& > li > ul {
+		margin-top: 0;
+		margin-left: 0;
+		padding-left: var(--spacing-3);
+	}
+}

package/themes/umberto/src/gloria/css/components/_image-zoom.scss

@@ -0,0 +1,13 @@
+@layer components {
+	.medium-zoom-overlay {
+		z-index: var(--z-index-zoom-image-overlay);
+	}
+
+	.medium-zoom--opened {
+		.medium-zoom-image {
+			&--opened {
+				z-index: var(--z-index-zoom-image);
+			}
+		}
+	}
+}

package/themes/umberto/src/gloria/css/components/_index.scss

@@ -0,0 +1,55 @@
+@use 'sass:meta';
+@use './utils' as utils;
+@use './image-zoom';
+@use './api-tree';
+@use './api-item-heading';
+@use './api-filter-dropdown';
+@use './api-collapsing-list';
+@use './hierarchy-list';
+@use './notification';
+
+@layer components {
+	$components: (
+		'badge',
+		'button',
+		'callout',
+		'columns',
+		'divider',
+		'banner',
+		'code-block',
+		'code-switcher',
+		'dropdown',
+		'icon',
+		'icon-message',
+		'input',
+		'menu-dropdown',
+		'mobile-overlay',
+		'nav-tree',
+		'spacer',
+		'tabs',
+		'keyboard-shortcut',
+		'heading-link',
+		'tooltip-popover',
+		'checkbox',
+		'card-learn-more-links',
+		'card',
+		'skeleton',
+		'fake-devtools',
+		'iframe',
+		'tag'
+	);
+
+	@each $component in $components {
+		@include meta.load-css(utils.component-path($component));
+	}
+
+	$apiComponents: (
+		'_header',
+		'_subheader',
+		'_toc'
+	);
+
+	@each $component in $apiComponents {
+		@include meta.load-css(utils.component-path($component, '_api-docs'));
+	}
+}